uniapp 获取手机浏览器底部高度
时间: 2025-01-08 21:52:23 浏览: 76
### 如何在 UniApp 中获取手机浏览器底部(如导航栏)的高度
#### 使用 `uni.getSystemInfo` 方法
为了动态适应不同设备屏幕尺寸和状态栏高度,可以利用 `uni.getSystemInfo` 接口来获取系统的相关信息。此方法能够返回关于当前操作环境的各种参数,其中包括安全区域的信息。
```javascript
export default {
onLaunch: function () {
this.setAppInfo();
},
methods: {
setAppInfo() {
uni.getSystemInfo({
success(res) {
const { safeAreaInsets } = res;
Vue.prototype.safeBottomInset = safeAreaInsets.bottom || 0; // 底部内边距
}
});
}
}
}
```
上述代码片段展示了如何通过调用 `uni.getSystemInfo` 来取得包含底部内边距在内的系统信息[^2]。
#### CSS 自动适配方案
对于 H5 页面来说,还可以借助 CSS 变量配合媒体查询的方式处理页面布局中的固定定位元素被原生导航条遮盖的问题:
```css
/* 定义全局变量 */
html, body {
margin: 0;
padding: 0;
}
.fixed-bottom-box {
height: 140rpx;
position: fixed;
bottom: env(safe-area-inset-bottom); /* iOS 系统的安全区留白 */
left: 0;
width: 100%;
}
```
这里使用了 `env()` 函数指定组件距离视窗底端的距离应等于操作系统提供的安全区内边距值,从而确保即使存在虚拟按键也不会影响到网页内容显示[^4]。
#### 结合 JavaScript 和 CSS 解决方案
如果希望更灵活地控制界面行为,则可以在初始化阶段先读取一次系统信息保存至 Vuex store 或者 global property 当中供后续逻辑判断;同时也可以考虑编写一个通用 mixin 组件用于监听窗口大小变化事件以便实时调整样式设置。
阅读全文
相关推荐

















