HTML5 的全屏显示功能

要全屏显示窗口，如果是新窗口可以用 window.open 方法指定 "fullscreen" 参数。但是出于安全考虑，现在大多数浏览器都会在全屏时显示地址栏或者状态栏，因此只能得到伪全屏的效果。如果是当前窗口，以前并没有好办法做到，只能提醒用户按 F11 键了。

目前，在 HTML5 中已经有全屏显示 API 的草案了，而且 Chrome 15，Safari 5.1 和 Firefox 10 都支持它。但是，具体的写法还是稍有不同的。例如：

// chrome and safari
element.webkitRequestFullScreen();
document.webkitCancelFullScreen(); 
// firefox
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 
// W3C
element.requestFullscreen();
document.exitFullscreen();

其中，每个元素都可以要求全屏，但未必总能成功；而退出全屏是 document 元素的方法。注意其中的 screen 的大小写有些不同。

至于移动设备，Chrome 28 for Android 开始支持这个全屏 API。而对于 iOS 设备，在网页头部添加如下一行，可以让该网页在 iOS 桌面直接打开时全屏显示：

<meta name="apple-mobile-web-app-capable" content="yes" />

参考资料：
[1] Fullscreen - Living Specification -W3C
[2] Using full-screen mode - MDN
[3] Using the Fullscreen API in web browsers
[4] Let Your Content Do the Talking: Fullscreen API - HTML5Rocks
[5] Native Fullscreen JavaScript API (plus jQuery plugin)
[6] HTML5 全屏 API - 幸福收藏夹
[7] Chrome 28 Beta: A more immersive web, everywhere

[YAML] updated: 2013-06-25 22:43:00