HTML5全屏浏览器兼容方案

最近一个项目有页面全屏的的需求，搜索了下有HTML5的全屏API可用，不过各浏览器的支持不一样。

标准	webkit	Firefox	IE
Element.requestFullscreen()	webkitRequestFullscreen	mozRequestFullScreen	msRequestFullscreen
Document.exitFullscreen()	webkitExitFullscreen	mozCancelFullScreen	msExitFullscreen
Document.fullscreenElement	webkitFullscreenElement	mozFullScreenElement	msFullscreenElement
Document.fullscreenEnabled	webkitFullscreenEnabled	mozFullScreenEnabled	msFullscreenEnabled
Document.fullscreenchange	webkitfullscreenchange	mozfullscreenchange	MSFullscreenChange
Document.fullscreenerror	webkitfullscreenerror	mozfullscreenerror	MSFullscreenError

MDN Fullscreen API: The Fullscreen API provides an easy way for web content to be presented using the user's entire screen. The API lets you easily direct the browser to make an element and its children, if any, occupy the fullscreen, eliminating all browser user interface and other applications from the screen for the duration.

全屏接口提供了简单的方式通过用户整个屏幕展示浏览器的内容。这个接口让我们很轻松的引导浏览器使一个元素和它的子元素占据整个屏幕，并且从屏幕上消除所有浏览器用户界面和其它应用程序。

一、接口使用（以谷歌浏览器为例）

1.requestFullscreen()

全屏请求方法，使用方法：Element.requestFullscreen()。

    
    requestFullscreen

触发事件后会有按ESC即可退出全屏模式的文字提示。

全屏时提示信息

注意

MDN Element.requestFullscreen(): Only elements which are in the HTML namespace (that is, elements which are standard HTML), plus the and $$ elements, which are located in the top-level document or in an