浏览器的全屏功能小结
原文地址: 浏览器的全屏功能小结
背景
浏览器页面在视频播放, 图片浏览, 编辑文本等场景, 会遇到增大页面的可查看和可交互区域的需求.
对于这种场景, 一般做法是提供一个全屏按钮, 用户可以选择点击按钮触发全屏.
本文对实现浏览器全屏进行简单总结:
- 伪全屏, 浏览器全屏和元素全屏
- 全屏相关快捷键
- 元素全屏的兼容性和浏览器差异
伪全屏, 浏览器全屏和元素全屏
在了解全屏功能之前, 先了解三个全屏相关概念: 伪全屏
, 浏览器全屏
和 元素全屏
.
伪全屏
保持页面大小, 将页面中的次要的内容隐藏起来, 把页面空间让给需要突出给用户的内容. 伪全屏并没有改变页面在显示器中的展示面积, 只是优化了页面呈现的内容, 所以称为 伪全屏
.
伪全屏是完全由代码控制实现, 不会有兼容性问题.
浏览器全屏
浏览器全屏的展示
浏览器全屏时浏览器铺满显示器窗口, 保留标签栏, 地址栏等浏览器组件.
如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
- Fullscreen API
- fscreen
- Web全屏模式
EOF
转载于:https://juejin.im/post/5bec40895188254d070bda86
浏览器的全屏功能小结相关推荐
- 浏览器全屏功能 icon图标设置
如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11. 一.icon图标选择: 这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找ui设计一个,地址:icon图标库,icon相关代码如下 ...
- js 控制浏览器 实现全屏 和 退出全屏功能
在工作中我们偶尔遇到不需要浏览器导航栏和标题栏,需要将整个项目全屏展示的情况,虽然有一些快捷键可以实现此效果,但我们更希望项目中有类似的功能,可以让用户任意切换. 1.js 功能处理 //本案例只为演 ...
- 设置浏览器横屏可行性测试,附带浏览器全屏功能
输入法问题: 1.QQ浏览器.UC浏览器可通过标签设置横屏(这种模式下输入法也是横屏状态) <meta name='full-screen' content='true' /><me ...
- JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽 经分析,viewer.js 发现了判断逻辑 debug发现 第二个判断后为 ...
- vue点击网页全屏_vue-cli点击实现全屏功能(两种方式)
项目中有点击按钮实现全屏功能 方式一:js实现全屏 代码如下: 全屏 export default { name: "index", data(){ return{ fullscr ...
- js vue+elementui 全屏跟退出全屏功能搬砖
html部分代码 <span class="user" @click="toggleFullScreen"><el-tooltip class ...
- 前端js使浏览器窗口全屏与退出----浏览器全屏时 监测通过esc按键退出全屏 (退出全屏时有页面上的相关处理)
vue项目 项目分为顶部导航.侧边导航.以及右边mainContent区域 需求是 让项目的其中一个页面有全屏功能 并且在全屏时隐藏掉顶部的顶导航栏 实现: 1.在state里 定义一个全局 ...
- 全屏功能-实现全屏-图标切换
目标:添加一个按钮,实现全屏网页全屏切换 实现方法:浏览器中自带全屏功能document.documentElement.webkitRequestFullScreen(),不过有兼容性问题,所以改用 ...
- 包括edge,Chrome,火狐、百度,360等浏览器怎么全屏_如何在Microsoft Edge中启用和禁用全屏模式以及解决浏览器无法开启或关闭全屏的问题
文章目录 1. 引出问题 2. 解决问题 2.1 使用缩放菜单 2.2 Win + Shift + Enter窍门 2.3 最大化与全屏模式 2.4 以全屏模式观看网络视频 3. 重要总结 4. 解决 ...
最新文章
- 自学python方法-零基础初学Python人工智能的四种学习方法
- 报名啦!阿里云智能客服对话式AI算法大赛之知识图谱构建与问答
- 理解ABR及其工作原理
- vSphere 4系列之六:Standard vSwitch
- 第二章 变量、数据类型和运算符
- mysql cluster双机_GitHub - sophys/mysqlha: 博客“Mysql-cluster数据库集群双机HA研究”测试代码...
- php暂停循环,在特定数量的递归循环后,PHP停止执行
- java日期处理总结
- 网络的性能指标与分组交换网络
- 为自己的p2psearcher理想而努力地奋斗
- Hands-on Lab (6) - 配置Gogs的Webhook
- 两个向量的点乘和叉乘怎么算_【解析几何】赋值法(点乘双根法)解决解析几何大题...
- 腾讯云学生服务器更换系统,腾讯云学生轻量服务器免费升配攻略(60G SSD系统盘不支持升级)...
- gcj编译java_用GCJ编译Java源文件成脱离JRE的exe可执行文件
- 微信小程序对接微信支付详细教程
- 解答篇:金蝶K3wise总账凭证页面查询不到科目分录核算项目
- 如何实现类似淘宝商城的七天自动确认收货???
- 会议OA项目(送审后审批人签字功能)
- 企业微信和小程序绑定,获取unionid
- Error: While importing ‘run_app_dev‘, an ImportError was raised.
热门文章
- vue保存页面的值_vue前端页面跳转参数传递及存储
- ghost还原固态硬盘_固态硬盘如何做系统盘
- java 限流熔断_SpringCloud-Alibaba-Sentinel服务降级,热点限流,服务熔断
- vscode无法打开源文件iostream_C++的iostream标准库介绍(1)
- mysql数据库快捷添加外键_mysql 数据库添加外键的几种方式
- 闪电邮修改服务器设置,网易闪电邮添加outlook邮箱的方法(图文教程)
- mysql常用四种连接_MySQL四种连接查询
- 直方图尖峰python_直方图、密度图、散点图,python数据可视化方法,你要的都在这里...
- 4g网络切换软件_5G 网络NSA与SA模式 互操作策略研究
- Android接入unityads广告,Unity Ads胡敏:开发者如何通过广告获取成功