html5 打开网页自动全屏,html5 网页全屏显示

1.统一样式

因为不同的浏览器的样式不一致,所以,最好统一样式

:-webkit-full-screen {

/* properties */

}

:-moz-full-screen {

/* properties */

}

:-ms-fullscreen {

/* properties */

}

:full-screen { /*pre-spec */

/* properties */

}

:fullscreen { /* spec */

/* properties */

}

/* deeper elements */

:-webkit-full-screen video {

width: 100%;

height: 100%;

}

/* styling the backdrop*/

::backdrop {

/* properties */

}

::-ms-backdrop {

/* properties */

}

2.全屏和退出全屏的方法

// 判断各种浏览器,找到正确的方法

function launchFullscreen(element) {

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if(element.msRequestFullscreen) {

element.msRequestFullscreen();

}

}

function exitFullscreen() {

if(document.exitFullscreen) {

document.exitFullscreen();

} else if(document.mozCancelFullScreen) {

document.mozCancelFullScreen();

} else if(document.webkitExitFullscreen) {

document.webkitExitFullscreen();

}

}

3.调用

启动全屏 退出全屏

更多的相关html5特性,请戳我

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值