html5——全屏顯示
阿新 • • 發佈：2017-12-26
兼容 wid this elements meta ack document title class
基本概念
1、HTML5規範允許用戶自定義網頁上任一元素全屏顯示
2、requestFullscreen() 開啟全屏顯示、cancleFullscreen() 關閉全屏顯示
3、不同瀏覽器兼容性不一樣
4、全屏偽類div:-ms-fullscreen，表示在全屏後的狀態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 100px; height: 100px; background-color: yellow; } div:-ms-fullscreen { width: 600px; } div:-moz-full-screen { height: 400px; } div:-webkit-full-screen { height: 400px; } </style> </head> <body> <div></div> <script> var div = document.getElementsByTagName("div")[0]; div.onclick = function () { if (this.requestFullscreen) { this.requestFullscreen(); } else if (this.mozRequestFullScreen) { console.log(this.mozRequestFullScreen); this.mozRequestFullScreen(); } else if (this.webkitRequestFullScreen) { console.log(this.webkitRequestFullScreen); this.webkitRequestFullScreen(); } } </script> </body> </html>
html5——全屏顯示