HTML5實現全屏

現在主流的瀏覽器都支持全屏，但是各家實現不一。下面是主流瀏覽器實現方法：

// W3C 提議 element.requestFullscreen(); element.exitFullscreen(); // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); element.webkitCancelFullScreen(); // Firefox 10+ element.mozRequestFullScreen(); element.mozCancelFullScreen();

實際使用的時候我們需要做兼容，可以用函數包裝起來：

//進入全屏 function requestFullScreen(element) { var de = document.querySelector(element) || document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } } //退出全屏 function exitFullscreen(element) { var de = document.querySelector(element) || document.documentElement; if (de.exitFullscreen) { de.exitFullscreen(); } else if (de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if (de.webkitCancelFullScreen) { de.webkitCancelFullScreen(); } }

封裝后兼容主流瀏覽器用法，且支持某個指定的元素全屏，支持class、id查詢。默認是對整個網頁全屏。

調用方法：

requestFullScreen(); requestFullScreen('body'); requestFullScreen('#main');

可能出於安全考慮，只能手動觸發才能實現全屏，瀏覽器自動執行無效果。通過控制台可以看到提示：API can only be initiated by a user gesture。

HTML5全屏API 相對比較簡單，但是瀏覽器的差異性導致很丑的代碼，並且不能保證它們不會再改變。如果你不想自己維護代碼，你可以使用screenfull.js 這樣的類庫，它可以平滑過渡這些差異。

參考：
1、HTML5實現全屏API【進入和退出全屏】 - kingwell - 博客園
http://www.cnblogs.com/kingwell/p/3706352.html
2、How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） - 微個日光日 - 博客頻道 - CSDN.NET
http://blog.csdn.net/xiebaochun/article/details/40143025
3、sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
https://github.com/sindresorhus/screenfull.js/