uniapp 页面全屏

设置页面全屏的方法

在UniApp中实现页面全屏显示可以通过以下几种方式实现：

修改manifest.json配置 在manifest.json文件中设置全屏模式，适用于全局配置：

"plus": {
  "statusbar": {
    "immersed": true
  }
}

使用CSS样式 通过CSS设置页面高度为100%：

page {
  height: 100%;
}
.container {
  height: 100vh;
}

调用原生API 在需要全屏的页面调用原生API：

// 进入全屏
uni.setFullScreen({
  fullScreen: true
});

// 退出全屏
uni.setFullScreen({
  fullScreen: false
});

使用系统状态栏控制 控制状态栏显示/隐藏：

// 隐藏状态栏
uni.hideNavigationBarLoading();

// 显示状态栏
uni.showNavigationBarLoading();

注意事项

• 全屏效果可能因平台差异而不同，需测试各平台兼容性
• 部分API需要特定平台支持，需查阅官方文档确认
• 在H5端全屏效果可能受限，需使用浏览器全屏API

各平台适配建议

微信小程序 使用wx.setFullScreen接口：

wx.setFullScreen({
  fullScreen: true
});

H5页面 使用标准全屏API：

document.documentElement.requestFullscreen();

App端 推荐使用plus.navigator全屏方法：

plus.navigator.setFullscreen(true);