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