今日已经过去小时
这周已经过去天
本月已经过去天
今年已经过去个月
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动态调整样式或添加类来进一步控制布局。