全屏fullscreenAPI

1.全屏API可以让element全屏显示使用时要加上浏览器前缀：

element.requestFullscreen()：

例:` function launchFullscreen(element) {                   if(element.requestFullscreen) {                    element.requestFullscreen();                  }else if(element.mozRequestFullScreen) {//Gecko (Firefox)                    element.mozRequestFullScreen();                  }else if(element.webkitRequestFullscreen) {//Blink (Chrome & Opera)                       element.webkitRequestFullscreen();                  }else if(element.msRequestFullscreen) {//Internet Explorer 11                    element.msRequestFullscreen();                  }            }launchFullscreen(element);`

注意这样直接调用是浏览器不允许的，控制台会报错API can only be initiated by a user gesture（只能通过用户动作来调用）

btn.onclick=function(){   launchFullscreen(element);//正确调用                             }`

放大节点时，Firefox和Chrome在表现上是有不同的。Firefox自动为该节点增加一条CSS规则，将该元素放大至全屏状态，width: 100%; height: 100，而Chrome则是将该节点放在屏幕的中央，保持原来大小，其他部分变黑。为了让Chrome的行为与Firefox保持一致，可以自定义一条CSS规则。

:-webkit-full-screen #myelement {  width: 100%;  height: 100%;}

2.退出全屏方法同样要属性加上浏览器前缀：

document.exitFullscreen();

例：function exitFullscreen() {              if (document.exitFullscreen) {                document.exitFullscreen();              } else if (document.msExitFullscreen) {                documnet.msExitFullscreen();              } else if (ele.mozCancelFullScreen) {                document.mozCancelFullScreen();              } else if (document.webkitExitFullscreen) {                document.webkitExitFullscreen();              }            }btn.onclick=function(){       exitFullscreen();                          }

这里的exitFullscreen()方法的对象只能是document

3.全屏属性和事件：

1.（属性）document.fullscreenElement:

    该属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。

var fullscreenElement =document.fullscreenElement ||                       document.mozFullScreenElement ||                       document.webkitFullscreenElement;

2.（属性）document.fullscreenEnabled:

    该属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

var fullscreenEnabled =document.fullscreenEnabled ||                       document.mozFullScreenEnabled ||                       document.webkitFullscreenEnabled ||                       document.msFullscreenEnabled;

3.fullscreenchange事件：浏览器开始或退出全屏时触发。

4.fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

4.Fullscreen CSS浏览器提供了一些有用的 fullscreen CSS 控制规则:

:-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%;}