JS全屏事件

2018年1月29日

方案

监听 resize 事件,当width和height恰好等于屏幕的长宽时候,就认为是全屏。

window.screen.width
window.screen.height

此刻添加 scaleX scaleY 参数,平铺拉伸到整个页面。并添加上 overflow: "hidden",以防止滚动条。
当长宽不等时候,恢复到 scaleX(1)scaleY(1)

遇到的一些问题

(1)全局监听全屏事件,意料之外的是没找到此事件。

fullscreenchange 可以监听到 JS 触发(通过 requestFullScreen 这个API 触发)的全屏事件.
但对于用户键盘快捷键触发(如 mac用户 command+shift+f )的全屏动作, 并没有响应。(不知道 window 用户通过 F11 进入的全屏事件,是否能被监听到?因为mac已经测试不通过了,就没测windows)
所以最后还是选择 “监听 resize 事件” 的方案。

(2)“全屏在 mac 上可以,window 下无效了。”

第一反应是 window 下获取显示器屏幕尺寸的API和 mac 不一样,即 window.screen.width 获取的值不同。
经测试, window.screen.width 是一样的。其原因是 window下出现了滚动条,导致了 document.documentElement.clientWidth 的值比真实值少了滚动条的宽度。

方案:使用 window.innerWidth 代替 document.documentElement.clientWidth

API

(1)全屏

document.documentElement.requestFullScreen(); document.exitFullscreen(); document.addEventListener("fullscreenchange", function(e) {});

(2)长宽

显示器屏幕物理长宽
window.screen.width
window.screen.height
浏览器的长宽
window.outerWidth
window.outerHeight
可见区域 但不包括滚动条
document.documentElement.clientWidth
document.documentElement.clientHeight
$(window).width()
$(window).height()
可见区域;浏览器窗口的长宽; 且包括滚动条,但似乎只有chrome有?
window.innerWidth
window.innerWidth

推荐阅读更多精彩内容