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直接设置全屏

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- IOS启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />