uniapp h5不全屏如何解决

在uniapp开发的H5页面中，如何解决页面无法全屏显示的问题？页面上下总是留有空白区域，尝试设置viewport和CSS宽高百分比仍不生效，有没有完整的解决方案？

2 回复

在pages.json中配置对应页面的style，添加"navigationStyle": "custom"，并手动处理状态栏高度。


在 UniApp 中，H5 页面默认可能会显示浏览器地址栏等元素，导致不全屏显示。以下是几种解决方法：

1. 使用 manifest.json 配置（PWA 模式）

在 manifest.json 中添加 "fullscreen": true，适用于 PWA 应用：

{
  "name": "My App",
  "display": "fullscreen"
}

2. 通过 pages.json 配置页面样式

在 pages.json 中为特定页面设置全屏样式：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "app-plus": {
          "statusbar": {
            "immersed": true
          }
        }
      }
    }
  ]
}

3. 使用 CSS 强制全屏

在页面的样式文件中添加：

page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

4. 调用浏览器全屏 API（需用户交互）

在按钮点击等事件中触发全屏：

// 在方法中调用
enterFullscreen() {
  const docEl = document.documentElement;
  if (docEl.requestFullscreen) {
    docEl.requestFullscreen();
  } else if (docEl.mozRequestFullScreen) {
    docEl.mozRequestFullScreen();
  } else if (docEl.webkitRequestFullscreen) {
    docEl.webkitRequestFullscreen();
  } else if (docEl.msRequestFullscreen) {
    docEl.msRequestFullscreen();
  }
}

注意事项：

  • 浏览器全屏 API 需要用户主动交互（如点击事件）才能触发。
  • 不同浏览器对全屏的支持可能有所不同。
  • 在移动端，部分浏览器可能限制强制全屏功能。

选择适合你项目需求的方法即可。

回到顶部