HTML5网页如何在电脑端和手机端都全屏显示？

HTML5网页在电脑端和手机端都全屏显示的步骤如下：

1、打开HTML5网页代码。

2、在网页头部加上新代码，让网页的宽度自适应设备的宽度。代码如下：

<meta name="viewport" content="width=device-width

initial-scale=1.0

maximum-scale=1.0

minimum-scale=1.0

user-scalable=no" />

3、在输入代码完成后，把图片包括图片DIV 的宽度设置成百分之百即可。

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。

在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google

chrome

15

+,

safri5.1+,firfox10+,IE11支持

全屏

var

docElm

=

document.documentElement

//W3C

if

(docElm.requestFullscreen)

{

docElm.requestFullscreen()

}

//FireFox

else

if

(docElm.mozRequestFullScreen)

{

docElm.mozRequestFullScreen()

}

//Chrome等

else

if

(docElm.webkitRequestFullScreen)

{

docElm.webkitRequestFullScreen()

}

//IE11

else

if

(elem.msRequestFullscreen)

{

elem.msRequestFullscreen()

}

全屏代码没有在，你的只是播放而已

要全屏F11即可，

全屏代码存在兼容性问题，你的这个浏览器应该可以

Option.prototype.toggleFullscreen = function() {

if ((document.fullScreenElement &&document.fullScreenElement !== null) ||

(!document.mozFullScreen &&!document.webkitIsFullScreen)) {

this.enterFullscreen(document.documentElement)

} else {

this.cancelFullscreen()

}

}

Option.prototype.enterFullscreen = function(docElm) {

if (docElm.requestFullscreen) {

docElm.requestFullscreen()

}

else if (docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen()

}

else if (docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen()

}

}

Option.prototype.cancelFullscreen = function(){

if (document.exitFullscreen) {

document.exitFullscreen()

}

else if (document.mozCancelFullScreen) {

document.mozCancelFullScreen()

}

else if (document.webkitCancelFullScreen) {

document.webkitCancelFullScreen()

}

}

---