今日已经过去小时
这周已经过去天
本月已经过去天
今年已经过去个月
HTML5全屏API的引入:
跨浏览器兼容性:
安全性和用户体验的考虑:
HTML5 提供了一套全屏API,允许Web应用以全屏模式运行。这个API主要依赖于requestFullscreen()
、exitFullscreen()
等方法,以及fullscreenElement
、fullscreenEnabled
等属性。
检查浏览器是否支持全屏API:
if (document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled) { // 支持全屏 }
进入全屏模式:你可以将任何元素(通常是<body>
或某个<div>
)设置为全屏。
var elem = document.documentElement; // 例如,将整个页面设为全屏 if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); }
退出全屏模式:
if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { /* Firefox */ document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE/Edge */ document.msExitFullscreen(); }
监听全屏事件:可以监听fullscreenchange
或浏览器前缀版本的事件来检测全屏状态的变化。
document.addEventListener("fullscreenchange", function(e) { console.log("全屏状态已改变!"); });
虽然这种方法并不能真正让浏览器进入全屏模式(即去除浏览器工具栏等),但可以通过设置CSS样式来让页面内容尽可能占满整个浏览器窗口。
html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* 防止滚动条出现 */ }
然后,你可以通过JavaScript动态调整样式或添加类来进一步控制布局。