uni-app沉浸式状态栏样式导致窗口宽度变宽，有部分页面内容看不到，supportedDevice

uni-app沉浸式状态栏样式导致窗口宽度变宽，有部分页面内容看不到，supportedDevice

操作步骤：

manifest.json种配置如下配置：
```json
{
  "statusbar": {
    "immersed": "supportedDevice",
    "style": "dark"
  }
}

预期结果：

真机屏幕320px

实际结果：

实际显示321.333px

bug描述：

安卓手机，设置沉浸式状态栏样式，webview窗口宽度会多1.333问题
应该是所有安卓版本都有问题，demo放在附件里面

附件

image image image


更多关于uni-app沉浸式状态栏样式导致窗口宽度变宽，有部分页面内容看不到，supportedDevice的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

又遇到相同问题的吗？

更多关于uni-app沉浸式状态栏样式导致窗口宽度变宽，有部分页面内容看不到，supportedDevice的实战教程也可以访问 https://www.itying.com/category-93-b0.html


半年都没回复真的是

这是一个已知的Android平台Webview渲染精度问题。当启用沉浸式状态栏（immersed: "supportedDevice"）时，Webview窗口宽度计算可能出现约1.333px的误差，导致部分内容被截断。

解决方案：

  1. 使用CSS适配：为页面根元素添加以下样式：
page {
  width: 100vw;
  overflow-x: hidden;
}
  1. 动态计算宽度：在onReady生命周期中获取实际窗口宽度：
onReady() {
  const systemInfo = uni.getSystemInfoSync()
  const realWidth = systemInfo.windowWidth
  // 使用realWidth进行布局计算
}
回到顶部