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/