JS实现浏览器全屏

JavaScript018

JS实现浏览器全屏,第1张

注解：ele要全屏的元素

退出全屏直接使用document调用exitFullscreen方法即可。

document.fullscreenElement()：获取当前全屏的元素。

注意：

1.document下没有requestFullscreen

2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发

3.页面跳转需先退出全屏

4.进入全屏的元素，将脱离其父元素，所以可能导致某些css失效

解决方案：使用 :full-screen伪类 为元素添加全屏时的样式（使用时为了兼容注意添加-webkit、-moz或-ms前缀）

5.一个元素全屏后，其子元素要再全屏，需先让该元素退出全屏

使用原生js实现全屏

原生js实现起来比较复杂，考虑到各种浏览器的兼容性问题

还有另外一种较为方便的方法

在vue项目中引入插件

screen() {

  // 如果不允许进入全屏，发出不允许提示

  if (!screenfull.enabled) {

    this.$message("您的浏览器不能全屏")

    return false

  }

  screenfull.toggle()

  },

最近项目中接入 video.js 框架，在安卓机上 全屏 时， 有声音无画面 。

通过调试，发现在全屏后，video标签 width &height 均为0，

经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。

果断放弃video自带的全屏方案。

通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

但是问题又出现了，手机的20px的 状态条 仍旧在 =_=#

可以结合cordova插件 cordova-plugin-statusbar 插件实现。

【插件地址 传送门】

至此，曲线救国，问题修复。