HTML5設置全屏需要使用全屏API,該API提供了新的方式來管理全屏模式。
要在HTML5中啟用全屏模式,我們需要使用以下代碼:
var element = document.documentElement; if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); }
上面的代碼會使整個網頁進入全屏模式,element代表要進入全屏模式的元素。
要退出全屏模式,我們只需要用以下代碼:
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }
這會將網頁從全屏模式退出并恢復到正常的瀏覽器窗口。
HTML5全屏API還提供了其他一些功能,如檢測是否處于全屏模式、全屏狀態的變化等。
總的來說,HTML5全屏API是一個非常方便和強大的功能,可以幫助我們更好地管理網頁的全屏體驗。
上一篇js元素css