背景
浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求.
对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击按钮触发全屏.
本文对实现浏览器全屏进行简单总结:
- 伪全屏, 浏览器全屏和元素全屏
- 全屏相关快捷键
- 元素全屏的兼容性和浏览器差异
伪全屏, 浏览器全屏和元素全屏
在了解全屏功能之前, 先了解三个全屏相关概念: 伪全屏
, 浏览器全屏
和 元素全屏
.
伪全屏
保持页面大小, 将页面中的次要的内容隐藏起来, 把页面空间让给需要突出给用户的内容. 伪全屏并没有改变页面在显示器中的展示面积, 只是优化了页面呈现的内容, 所以称为 伪全屏
.
伪全屏是完全由代码控制实现, 不会有兼容性问题.
浏览器全屏
浏览器全屏的展示
浏览器全屏时浏览器铺满显示器窗口, 保留标签栏, 地址栏等浏览器组件.
如chrome浏览器全屏:
浏览器全屏是系统窗口全屏
浏览器全屏通过浏览器菜单或浏览器快捷键触发. 浏览器全屏是操作系统的窗口全屏在浏览器上的实现, 其他桌面软件一般也支持窗口全屏.
- IE11浏览器非全屏
- IE11浏览器窗口全屏
- 资源管理器非全屏
- 资源管理器窗口全屏
浏览器全屏快捷键
- mac:
control + command + F
切换浏览器全屏 - win:
F11
切换浏览器全屏
元素全屏
元素全屏的展示
元素全屏的元素会铺满显示器全屏, 并将浏览器本身的窗口栏, 标签栏和地址栏都收起来.
- 腾讯视频网页元素全屏
- 腾讯视频非全屏
元素全屏由代码控制
元素全屏是浏览器实现的页面全屏能力, 由 js 代码控制页面中的某个元素进行全屏展示. 相关文档可以看 Guide to the Fullscreen API.
比如: 腾讯视频播放时的全屏, 是对 <video />
的祖先元素进行了全屏操作.
- 腾讯视频video元素位置
- 全屏播放时的全屏元素为 video 的祖先元素
元素全屏能力测试
元素全屏能力的浏览器兼容性可以查看官方文档: Fullscreen API.
浏览器元素全屏能力测试: 可以使用元素全屏库 fscreen 的测试页面: fscreen.rafrex.com/.
元素全屏快捷键
- mac/win
Esc
退出元素全屏 - 没有自带的触发元素全屏快捷键
各浏览器的全屏差异
测试了 mac 和 windows 系统下的 5 款浏览器.
- chrome
- firefox
- Edge (windows)
- IE11 (windows)
- safari (mac)
Esc 快捷键
- 浏览器全屏下, 按 Esc 不会退出全屏, 会触发 Esc 键盘事件. safari 会退出浏览器全屏并触发事件, 需要针对 safari 做 preventDefault.
- 元素全屏下, 按 Esc 按键会退出元素全屏, 不会触发 Esc 的键盘事件.
触发元素全屏, 部分浏览器会出现提示
这些提示是浏览器行为, 无法通过 js 代码禁止.
- chrome 会提示 "press Esc to exit full screen"
- firefox 会提示 "rafrex.com is now full screen"
- IE11会提示"Do you want to view rafrex.com in full screen?...", 可以选择"Allow once", "Always allow", "Deny once"
- Edge 会提示"fscreen.rafrex.com switched to full screen(Esc to exit)."
特定浏览器问题
firefox
触发元素全屏和退出元素全屏后, firefox 会出现1秒左右的显示器黑屏. fscreen 的测试代码, youtube 的视频全屏播放都存在这个问题.
该问题 mac 和 win 都存在. 相关讨论: Black screen for a second when going fullscreen on videos.
safari
mac safari 打开调试工具情况下, 触发浏览器全屏时, 调试工具会黑掉.
IE11
IE11 的元素全屏只能由用户操作触发, 不能由键盘事件触发. 相关讨论: IE11 fullscreen triggered from keyboard. 键盘事件触发元素全屏时, 会触发onfullscreenerror
(MSFullscreenError) 事件.
QQ浏览器
QQ浏览器劫持全屏快捷键F11后, 第三次点击F11没有进入键盘事件回调, 直接触发浏览器全屏. 如果第三次点击F11前, 鼠标点击了页面元素, 则问题不会发生.
怀疑是浏览器的坑. 最简测试代码:
let isFullscreen = false;
window.addEventListener('keydown',
function(e) {
console.log('test:', 'keydown', e.key, e.keyCode);
if (e.keyCode === 122) {
console.log('test:', 'F11 clicked');
e.preventDefault();
if (isFullscreen) {
console.log('test:', 'exit fullscreen');
document.webkitExitFullscreen();
} else {
console.log('test:', 'enter fullscreen');
document.body.webkitRequestFullscreen();
}
isFullscreen = !isFullscreen;
}
})
// win7, QQ浏览器10.2(1893), 内核模式: 使用智能内核模式
复制代码
IE10
IE10 不支持元素全屏, 可以模拟发送键盘事件触发浏览器全屏. 没实试, 相关讨论: Internet Explorer full screen mode.
总结
- 浏览器全屏只能由用户触发.
- 元素全屏由代码触发使元素铺满显示器页面, 要考虑兼容性和浏览器行为差异.
- 伪全屏不改变页面大小, 优化内容展示, 没有兼容性问题.
References
EOF