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/