js怎么让浏览器自动全屏显示

 在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发，所以不能自动全屏；用户事件触发方法如下：

// 判断各种浏览器，找到正确的方法 进入全屏
function launchFullscreen (element) {
  if (element.requestFullscreencreen) {
    element.requestFullScreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen()
  } else if (element.msRequestFullScreen) {
    element.msRequestFullScreen()
  }
}

必须用户事件触发（可以是鼠标事件，键盘事件等）

//某个元素全屏

launchFullscreen(dom) 

// 整个网页全屏!
launchFullscreen( document. documentElement)

// 判断浏览器种类 退出全屏
function exitFullscreen () {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}
// 退出全屏模式!
exitFullscreen()

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则：

-webkit-full-screen {
 color:#000;
 /* properties */
}
:-moz-full-screen {
 /* properties */
}
:-ms-fullscreen {
 /* properties */
}
:full-screen { /*pre-spec */
 /* properties */
}
:fullscreen { /* spec */
 /* properties */
}
/* deeper elements */
:-webkit-full-screen video {
 width: %;
 height: %;
}
/* styling the backdrop*/
::backdrop {
 /* properties */
}
::-ms-backdrop {
 /* properties */
}

另外某些浏览器可以通过meta直接设置全屏

<meta name="full-screen" content="yes">

<meta name="x5-fullscreen" content="true">

<meta name="apple-mobile-web-app-capable" content="yes" />