全面兼容 requestFullscreen

github

在线体验

对不支持requestFullscreen的设备用css模拟全屏容器

使用

<div id="full" style="width: 100%;">
  <button id="toggle">{}</button>
</div>

import Full from 'vs-full';

const full = new Full({
  // 需要全屏的容器
  el: document.querySelector('#full'),
  // 切换按钮
  toggle: document.querySelector('#toggle'),
  // 强制旋转
  forceRotate: false,
  // 自动旋转
  autoRotate: false,
  // 禁止滑动
  disableScroll: true,
});

参数

• Selector 为 querySelector 选择器 如：‘#ID’ ‘.CLASS’

参数名	描述	可选值	默认值
el	全屏容器	HTMLElement or Selector	null
toggle	切换按钮	HTMLElement or Selector	null
forceRotate	强制旋转	boolean	false
autoRotate	自动旋转	boolean	false
disableScroll	禁止滑动	boolean	false
nativeFirst	原生优先	boolean	false

事件

事件名	描述
onUpdate	切换全屏时触发

方法

方法名	描述
toggle	切换全屏
requestFullscreen	进入全屏
exitFullScreen	退出全屏
destroy	销毁

注意

1. 如果 body 元素为 position:absolute; 请设置根元素的宽高