浏览器的全屏功能小结-CSDN博客

原文地址: 浏览器的全屏功能小结

背景

浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求.

对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击按钮触发全屏.

本文对实现浏览器全屏进行简单总结:

伪全屏, 浏览器全屏和元素全屏
全屏相关快捷键
元素全屏的兼容性和浏览器差异

伪全屏, 浏览器全屏和元素全屏

在了解全屏功能之前, 先了解三个全屏相关概念: 伪全屏, 浏览器全屏 和 元素全屏.

伪全屏

保持页面大小, 将页面中的次要的内容隐藏起来, 把页面空间让给需要突出给用户的内容. 伪全屏并没有改变页面在显示器中的展示面积, 只是优化了页面呈现的内容, 所以称为 伪全屏.

伪全屏是完全由代码控制实现, 不会有兼容性问题.

浏览器全屏

浏览器全屏的展示

浏览器全屏时浏览器铺满显示器窗口, 保留标签栏, 地址栏等浏览器组件.

如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), 内核模式: 使用智能内核模式
复制代码