Android浏览器和iOS Chrome都支持Fullscreen API,可以通过以下代码示例来实现全屏功能:
在HTML中添加一个按钮,点击该按钮时触发全屏功能:
在JavaScript中定义toggleFullScreen函数,根据浏览器支持情况调用相应的全屏API:
function toggleFullScreen() {
if (document.documentElement.requestFullscreen) {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
} else if (document.documentElement.mozRequestFullScreen) { // Firefox
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
document.documentElement.mozRequestFullScreen();
}
} else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen();
} else {
document.documentElement.webkitRequestFullscreen();
}
} else if (document.documentElement.msRequestFullscreen) { // IE/Edge
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
document.documentElement.msRequestFullscreen();
}
}
}
这段代码首先检测浏览器是否支持各种全屏API,然后根据支持情况执行相应的全屏操作。
注意:要使全屏API生效,需要在HTTPS环境下运行。