浏览器的全屏功能小结

CntChen
6,601 阅读5分钟

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

背景

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

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

全屏场景-文本
全屏场景-视频

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

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

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

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

伪全屏

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

伪全屏示例

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

浏览器全屏

浏览器全屏的展示

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

如chrome浏览器全屏:

chrome浏览器全屏

浏览器全屏是系统窗口全屏

浏览器全屏通过浏览器菜单或浏览器快捷键触发. 浏览器全屏是操作系统的窗口全屏在浏览器上的实现, 其他桌面软件一般也支持窗口全屏.

  • IE11浏览器非全屏

    浏览器非全屏

  • IE11浏览器窗口全屏

    浏览器全屏

  • 资源管理器非全屏

    资源管理器非全屏

  • 资源管理器窗口全屏

    资源管理器全屏

浏览器全屏快捷键

  • mac: control + command + F 切换浏览器全屏
  • win: F11 切换浏览器全屏

元素全屏

元素全屏的展示

元素全屏的元素会铺满显示器全屏, 并将浏览器本身的窗口栏, 标签栏和地址栏都收起来.

  • 腾讯视频网页元素全屏

    腾讯视频全屏

  • 腾讯视频非全屏

    腾讯视频非全屏

元素全屏由代码控制

元素全屏是浏览器实现的页面全屏能力, 由 js 代码控制页面中的某个元素进行全屏展示. 相关文档可以看 Guide to the Fullscreen API.

比如: 腾讯视频播放时的全屏, 是对 <video /> 的祖先元素进行了全屏操作.

  • 腾讯视频video元素位置

    腾讯视频video元素

  • 全屏播放时的全屏元素为 video 的祖先元素

    腾讯视频video祖先元素全屏

元素全屏能力测试

元素全屏能力的浏览器兼容性可以查看官方文档: Fullscreen API.

浏览器元素全屏能力测试: 可以使用元素全屏库 fscreen 的测试页面: fscreen.rafrex.com/.

fscreen测试页面

元素全屏快捷键

  • 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"

    chrome元素全屏提示

  • firefox 会提示 "rafrex.com is now full screen"

    firefox元素全屏提示

  • IE11会提示"Do you want to view rafrex.com in full screen?...", 可以选择"Allow once", "Always allow", "Deny once"

    IE11元素全屏提示

  • Edge 会提示"fscreen.rafrex.com switched to full screen(Esc to exit)."

    edge元素全屏提示

特定浏览器问题

firefox

触发元素全屏和退出元素全屏后, firefox 会出现1秒左右的显示器黑屏. fscreen 的测试代码, youtube 的视频全屏播放都存在这个问题.

firefox元素全屏1秒黑屏

该问题 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

avatar
文章
阅读
粉丝