uniapp 网页全屏
uniapp 实现网页全屏的方法
在 uniapp 中实现网页全屏功能，可以通过调用 HTML5 的全屏 API 或使用 uniapp 的插件实现。以下是几种常见的方法：
使用 HTML5 全屏 API
通过 JavaScript 调用浏览器的全屏 API 实现全屏效果。这种方法适用于 H5 平台。
// 进入全屏
function requestFullScreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏
function exitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}通过 uniapp 的 uni.setFullScreen 方法
uniapp 提供了 uni.setFullScreen 方法，可以方便地控制全屏状态。但需要注意该方法可能仅支持部分平台。
// 进入全屏
uni.setFullScreen({
fullScreen: true
});
// 退出全屏
uni.setFullScreen({
fullScreen: false
});监听全屏状态变化
可以通过事件监听全屏状态的变化，以便在用户手动切换全屏时做出响应。
document.addEventListener('fullscreenchange', handleFullScreenChange);
document.addEventListener('webkitfullscreenchange', handleFullScreenChange);
document.addEventListener('msfullscreenchange', handleFullScreenChange);
function handleFullScreenChange() {
const isFullScreen = document.fullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
console.log('当前全屏状态:', isFullScreen ? '全屏' : '非全屏');
}注意事项
- 全屏 API 需要用户交互触发（如点击事件），不能直接在页面加载时调用。
- 不同浏览器对全屏 API 的支持可能有所不同，需做好兼容性处理。
- 在非 H5 平台（如小程序、App）可能需要使用平台特定的全屏方案。
通过以上方法，可以在 uniapp 中实现网页全屏功能，并根据实际需求选择适合的方案。
