导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

侧边栏
最新评论
广树管理员
2025-05-07 21:00
@ZeroCounter:哈哈哈,被发现啦
ZeroCounter
2025-05-07 14:06
原来博主是可爱的二次元女孩子(→游船上那张全景
广树管理员
2025-05-06 14:31
@ZeroCounter:这样啊,逐渐听不懂现在的网络热梗了😅
ZeroCounter
2025-05-06 13:41
@广树:一个梗啦,表示很无语( 因为国内的阅读理解题经常写表达了作者的思乡之情(
广树管理员
2025-05-06 11:13
@ModerRAS:云台拍摄全景需要固定不动,时间也长,有一定场景限制。
攻略中
星空列车与白的旅行
暂无评分
Steam星空列车与白的旅行
2025年2月22日 22时 ~ 攻略中
已累计游玩2个月15天
乘坐的列车,划破夜空,飞驰在星空之下,令人心旷神怡——这可真是场超值之旅。舒爽夜风吹拂下的随心独旅中,我邂逅了随性的乘客,可人怜爱的乘务员。以及……猫耳少女?这场旅行,究竟会在她身上,留下了些什么呢?
PSN奖杯卡

PSN奖杯卡

归档
赞助商广告

网页全屏 Fullscreen API 的坑

作者:广树时间:2018-01-26 11:11:10分类:JavaScript

Fullscreen API在H5视频和H5游戏进入全屏的时候非常有用。

但是却隐藏着非常多的坑。


首先,看下兼容情况:

兼容图.png


例子:

点击下面的DEMO进入例子页面,如果浏览器支持的话DIV会全屏显示在屏幕中央。

查看DEMO


使用方法:

document."前缀"FullscreenEnabled 来调查是否支持Fullscreen API

document."前缀"RequestFullscreen()来全屏显示。

document."前缀"ExitFullscreen()来退出全屏显示。


关于前缀如下表显示:

Standard Blink (Chrome & Opera) Gecko (Firefox) Internet Explorer 11 Edge Safari (WebKit)
Document.fullscreen webkitIsFullScreen mozFullScreen - webkitIsFullScreen webkitIsFullScreen
Document.fullscreenEnabled webkitFullscreenEnabled mozFullScreenEnabled msFullscreenEnabled webkitFullscreenEnabled webkitFullscreenEnabled
Document.fullscreenElement webkitFullscreenElement mozFullScreenElement msFullscreenElement webkitFullscreenElement webkitFullscreenElement
Document.onfullscreenchange onwebkitfullscreenchange onmozfullscreenchange MSFullscreenChange onwebkitfullscreenchange onwebkitfullscreenchange
Document.onfullscreenerror onwebkitfullscreenerror onmozfullscreenerror MSFullscreenError onwebkitfullscreenerror onwebkitfullscreenerror
Document.exitFullscreen() webkitExitFullscreen() mozCancelFullScreen() msExitFullscreen() webkitExitFullscreen() webkitExitFullscreen()
Element.requestFullscreen() webkitRequestFullscreen() mozRequestFullScreen() msRequestFullscreen() webkitRequestFullscreen() webkitRequestFullscreen()


坑:

这段时间正好有一个全屏的需求就试了这个接口发现问题真的很多。


坑1:

Fullscreen API 现在有名字混乱的现象,分为Fullscreen 和 FullScreen 看文档的时候要注意,s是否为大写,有没有on!

另外对应的CSS也分为

:-webkit-full-screen

:-moz-full-screen

:-ms-fullscreen

:fullscreen


坑2:

火狐内核不能监听元素的全屏,只能监听document的全屏。


坑3:

iOS不能用!

iOS不能用!

iOS不能用!


各个浏览器的默认样式

Chrome:

默认对象会在屏幕中央显示,未填充部分显示黑色。

CSS 「:-webkit-full-screen」 可以对全屏对象进行位置调节。


Safari

默认会显示在屏幕中央

CSS 「:-webkit-full-screen」可以改变位置,

但是全屏的时候因为有过度,所以位置变更后过度会变得很奇怪。


Firefox

全屏会将对象撑满整个屏幕。

因此「:-moz-full-screen」无法指定宽高。


IE11

全屏对象会显示在画面左上角。

因此「:-ms-fullscreen」不设定的话不会显示在中央。

另外可以通过::-ms-backdrop来改变背景色。


donate.png

1210 x 50(蓝底).png

cloudcone