图片全屏（不仅仅是图片任何元素都行）

前言

今天在项目中有个需求是双击一张图片时，图片铺满全屏，再双击时，图片返回原来的大小，本来想手动改变图片的大小，后边发现居然有API。

做成了一个小例子上传到github : 戳这里

进入全屏

function full(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

ele：要全屏的元素，可以是document.body也可以是某一个div
思路：

• 判断该浏览器是否具有requestFullscreen方法
• 有，则直接执行ele.requestFullscreen()；没有则做浏览器兼容判断。

退出全屏

function exitFullscreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

判断是否是全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

参考资料

JS 全屏和退出全屏--requestFullScreen详解及兼容代码