现在主流的浏览器都支持全屏，但是各家实现不一。下面是主流浏览器实现方法：

// 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 相对比较简单，但是浏览器的差异性导致很丑的代码，并且不能保证它们不会再改变。如果你不想自己维护代码，你可以使用 这样的类库，它可以平滑过渡这些差异。

参考：

1、HTML5实现全屏API【进入和退出全屏】 - kingwell - 博客园

2、How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） - 微个日光日 - 博客频道 - CSDN.NET

3、sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API