当前位置：首页 > uni-app

uniapp 网页全屏

2026-03-05 02:27:49uni-app

uniapp 实现网页全屏的方法

在uniapp中实现网页全屏功能，可以通过调用HTML5的全屏API或结合uniapp的API实现跨平台适配。以下是具体实现方式：

使用HTML5全屏API

在H5环境下，可以通过document.documentElement.requestFullscreen()触发全屏，需注意浏览器兼容性：

uniapp 网页全屏

// 进入全屏
function enterFullscreen() {
    const element = document.documentElement;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { // Safari
        element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) { // IE11
        element.msRequestFullscreen();
    }
}

// 退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) { // Safari
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { // IE11
        document.msExitFullscreen();
    }
}

跨平台适配方案

在uniapp中，可通过条件编译区分平台。例如在H5中使用HTML5 API，其他平台调用原生能力：

uniapp 网页全屏

// #ifdef H5
enterFullscreen(); // 调用上述H5全屏方法
// #endif

// #ifdef APP-PLUS
plus.navigator.setFullscreen(true); // 安卓/iOS原生全屏
// #endif

监听全屏状态变化

通过fullscreenchange事件监听全屏状态：

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE

function handleFullscreenChange() {
    const isFullscreen = document.fullscreenElement || 
                        document.webkitFullscreenElement || 
                        document.msFullscreenElement;
    console.log('当前全屏状态:', isFullscreen ? '全屏中' : '已退出');
}

注意事项

用户交互触发：浏览器安全策略要求全屏操作必须由用户手势（如点击）触发，不能直接通过代码自动调用。
CSS适配：全屏模式下可能需要调整样式，例如：
```
:fullscreen, ::backdrop {
  background-color: #000;
}
```
权限问题：部分移动端浏览器可能限制全屏功能，需测试目标平台兼容性。

示例完整代码

以下是一个uniapp页面的完整示例，包含全屏按钮和状态管理：

<template>
    <view>
        <button @click="toggleFullscreen">切换全屏</button>
    </view>
</template>

<script>
export default {
    methods: {
        toggleFullscreen() {
            // #ifdef H5
            if (document.fullscreenElement) {
                this.exitFullscreen();
            } else {
                this.enterFullscreen();
            }
            // #endif
        },
        enterFullscreen() {
            const element = document.documentElement;
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            }
        },
        exitFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    }
}
</script>