HTML5 之全屏（Full Screen API）

技术日新月异，各大浏览器对 HTML5 的支持也越来越好，我们不妨大胆的使用 HTML5 API 来提升用户体验。这一节我们来看看 Full Screen API 的使用及原理。

一、使用场景

1.当我们看视频的时候，为提升用户体验，可能会需要视频窗口全屏化；
2.如果你恰好在对接地图业务，一张全屏的地图可能会更有视觉冲击力；
3.动态展示图片或动画全屏预览；
…

场景很多，但是使用 Full Screen API 一行代码就搞定了：

1	$('.your-container')[0].webkitRequestFullscreen();

是不是很酷，当然，这只适用与 webkit 内核浏览器的情况，而且还是最理想状态👻。

二、浏览器支持情况

可以看到，基本上所有浏览器都支持了，除了 iOS Safari 和 Opera Mini ，所以移动端应用需谨慎。

三、参数详解

• 检测全屏是否可用

  1 2 3 4 5 6 7 8 9

  //full-sreen available if( document.fullscreenEnable|| document.webkitFullscreenEnabled|| document.mozFullScreenEnabled|| document.msFullscreenEnabled ){ ... }

• 全屏：

  1 2 3 4 5 6 7 8 9 10 11

  var i = document.getElementById(myimage); // go full-screen if (i.requestFullscreen) { i.requestFullscreen(); } else if (i.webkitRequestFullscreen) { i.webkitRequestFullscreen(); } else if (i.mozRequestFullScreen) { i.mozRequestFullScreen(); } else if (i.msRequestFullscreen) { i.msRequestFullscreen(); }

• 退出全屏：

  1 2 3 4 5 6 7 8 9 10

  // exit full-screen if (document.exitFullscreen) { <