由於項目中用到了全屏化挫折功能，查看了API后寫了一個簡單的全屏化model
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> .div1{ width: 1000px;height: 500px; border: solid 1px blue; } .test{ width:100%; background: black; height:100%; min-height: 400px; border: solid 1px red; } div{ color: #fff; } </style> </head> <body> <div class="div1" > <div id="div2" class="test"> <div id="div" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">全屏</div> <div id="div3" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">取消全屏</div> </div> </div> <script> (function () { var viewFullScreen = document.getElementById("div"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.getElementById("div2"); if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.msRequestFullscreen) { docElm.msRequestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }else{ alert("當前瀏覽器不支持全屏化操作！"); } }, false); } var cancelFullScreen = document.getElementById("div3"); if (cancelFullScreen) { cancelFullScreen.addEventListener("click", function () { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else{ alert("當前瀏覽器不支持全屏化操作！"); } }, false); } })(); </script> </body> </html>
如果你想兼容一些低版本的ie瀏覽器，你可以替換我做提示的區域
alert("當前瀏覽器不支持全屏化操作！");
讓你想全屏的部分，width:100%;height:100%;
然后再讓他的父類節點的高度和寬度等於當前可用瀏覽器的最大寬度和高度就行啦。
在這里沒有做具體的實現。
本人，不是很建議去兼容低ie瀏覽器，因為做前端的都知道，現在大部分html5和css3,ES6都不在積極的淘汰
低版本瀏覽器。微軟也放棄了對低版本ie瀏覽器的維護。