uni-app h5 内嵌到安卓手机获取状态栏高度为0 uni.getSystemInfo() IOS系统正常获取

uni-app h5 内嵌到安卓手机获取状态栏高度为0 uni.getSystemInfo() IOS系统正常获取

操作步骤：

```javascript
<script>  
export default {  
    onLaunch: function () {  
        uni.getSystemInfo({  
            success: function (e) {  
                uni.showToast({  
                    icon: 'none',  
                    // 安卓为0  
                   // 苹果正常  
                    title: '系统状态栏高度' + e.statusBarHeight  
                })  
            }  
        })  
    },  
    onShow: function () {  
        console.log('App Show')  
    },  
    onHide: function () {  
        console.log('App Hide')  
    }  
}  
</script>
```

### 预期结果：
```  
正常获取状态栏高度
```

### 实际结果：
```  
高度一直为0
```

### bug描述：
```
安卓系统内嵌H5，H5中获取uni.getSystemInfo()状态栏高度为0；
IOS系统可以正常获取
```

| 项目信息         | 详细信息   |
|------------------|------------|
| 产品分类         | uniapp/H5  |
| PC开发环境操作系统 | Windows    |
| PC开发环境操作系统版本号 | 3.99       |
| HBuilderX类型    | 正式       |
| HBuilderX版本号  | 3.99       |
| 浏览器平台       | Chrome     |
| 浏览器版本       | 121.0.6167.185 |
| 项目创建方式     | HBuilderX  |

更多关于uni-app h5 内嵌到安卓手机获取状态栏高度为0 uni.getSystemInfo() IOS系统正常获取的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app h5 内嵌到安卓手机获取状态栏高度为0 uni.getSystemInfo() IOS系统正常获取的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，使用 uni.getSystemInfo() 获取系统信息时，H5 页面内嵌到安卓手机中获取状态栏高度为 0，而在 iOS 系统中正常获取，这可能是由于安卓系统的某些特性或 uni-app 的实现问题导致的。以下是一些可能的原因和解决方案：

1. 安卓系统状态栏高度的获取问题

  • 在安卓系统中，状态栏高度可能不会被直接暴露给 H5 页面，尤其是在内嵌到 WebView 中时。uni.getSystemInfo() 在安卓系统上可能无法正确获取状态栏高度。
  • 在 iOS 系统中，状态栏高度通常更容易获取，因此 uni.getSystemInfo() 可以正常工作。

2. 解决方案

  • 使用 uni.getSystemInfoSync() 替代 uni.getSystemInfo()
    有时候异步获取信息可能会出现问题，尝试使用同步方法获取系统信息：

    const systemInfo = uni.getSystemInfoSync();
console.log('Status bar height:', systemInfo.statusBarHeight);

  • 手动计算状态栏高度
    如果 uni.getSystemInfo() 返回的状态栏高度为 0，可以尝试通过其他方式手动计算状态栏高度。例如，通过 window.innerHeight 和 screen.height 来计算：

    const statusBarHeight = window.innerHeight - screen.height;
console.log('Status bar height:', statusBarHeight);

  • 使用 CSS 变量或 env() 函数
    在某些情况下，可以使用 CSS 变量或 env() 函数来获取状态栏高度。例如：

    body {
    padding-top: env(safe-area-inset-top);
}

  • 与原生端通信
    如果 H5 内嵌到安卓应用中，可以通过与原生端通信的方式来获取状态栏高度。原生端可以通过安卓的 WindowInsets 获取状态栏高度，并将结果传递给 H5 页面。

  • 检查 WebView 配置
    如果是在安卓 WebView 中嵌入 H5 页面，确保 WebView 的配置正确，允许 H5 页面获取系统信息。例如，确保 WebView 启用了 JavaScript，并且没有禁用某些 API。

3. 调试和日志

  • 在安卓设备上调试时，确保开启了调试模式，并查看控制台日志，检查是否有其他错误或警告信息。
  • 使用 console.log 打印 uni.getSystemInfo() 的所有返回信息，查看是否有其他有用的信息。

4. 兼容性处理

  • 在代码中增加兼容性处理，判断当前平台是安卓还是 iOS，并分别处理状态栏高度的获取：
    const systemInfo = uni.getSystemInfoSync();
let statusBarHeight = systemInfo.statusBarHeight;

if (systemInfo.platform === 'android' && statusBarHeight === 0) {
    // 安卓平台状态栏高度为0，手动设置一个默认值
    statusBarHeight = 25; // 根据实际情况调整
}

console.log('Status bar height:', statusBarHeight);
回到顶部