uni-app iPhoneX以上屏幕安全区像素偏差3-5个px 全面屏手机均存在这种问题
uni-app iPhoneX以上屏幕安全区像素偏差3-5个px 全面屏手机均存在这种问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 10.15.8 | HBuilderX |
产品分类：uniapp/App
测试过的手机：
无错误型号 redmi5A iPhone8 iPhonese 有错误型号 iPhonemini iPhone11 iPhone12 iPhone12 pro示例代码：
```html <template> <view class="content"> <scroll-view :scroll-x="true" style="white-space: nowrap;margin-left: 20rpx; width: 730rpx; height: 100rpx ; background-color: #0077AA; padding-top: 200rpx;" :show-scrollbar="true" :scroll-into-view="scrollintoview" :scroll-with-animation="true" id="tabtop"> <view style="width: 145rpx; display: inline-block;" v-for="(item,index) in tabBars" :key="item.id" :id="'tab'+index" :class="tabIndex === index ? 'selectText l-color-main' : '' " @click="changeTab(index)">{{item.title}}</view> </scroll-view> <swiper style="background-color: #007AFF; width: 750rpx; height: 490px;" [@change](/user/change)="onChangeTab" :current="current">
<swiper-item v-for="(item,index) in tabBars" :key="item.id">
<text>1</text>
</swiper-item>
</swiper>
<!-- <block v-for="item,index in list" :key="index">
<commenList :item="item" :index="index" @followed="followed" @doSupport="doSupport"></commenList>
<commonHorizontalLine></commonHorizontalLine>
</block> -->
</view>
<h2>操作步骤：</h2>
1. 获取屏幕的安全高度
```javascript
uni.getSystemInfo({
success: function(res) {
console.log(res.windowHeight);
}
});
- 获取第一个元素scroll-view的bottom scroll-view元素的代码
<scroll-view :scroll-x="true" style="white-space: nowrap;margin-left: 20rpx; width: 730rpx; height: 100rpx ; background-color: #0077AA; padding-top: 200rpx;"
:show-scrollbar="true" :scroll-into-view="scrollintoview" :scroll-with-animation="true" id="tabtop">
<view style="width: 145rpx; display: inline-block;" v-for="(item,index) in tabBars" :key="item.id" :id="'tab'+index"
:class="tabIndex === index ? 'selectText l-color-main' : '' " @click="changeTab(index)">{{item.title}}</view>
</scroll-view>
- 获取scroll-view距离顶部的距离
const query = uni.createSelectorQuery().in(this);
query.select('#tabtop').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("节点离页面顶部的距离为" + data.top);
}).exec();
- 通过console.log的输出 手工进行计算
<swiper style="background-color: #007AFF; width: 750rpx; height: 490px;" [@change](/user/change)="onChangeTab" :current="current">
<swiper-item v-for="(item,index) in tabBars" :key="item.id">
<text>1</text>
</swiper-item>
</swiper>
更多关于uni-app iPhoneX以上屏幕安全区像素偏差3-5个px 全面屏手机均存在这种问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
10 回复
来人啊
更多关于uni-app iPhoneX以上屏幕安全区像素偏差3-5个px 全面屏手机均存在这种问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
针对iPhoneX及以上全面屏设备出现的3-5px安全区偏差问题，这是iOS系统对刘海屏设备的特殊处理导致的。以下是解决方案：
- 使用官方安全区适配方案：
/* 在App.vue中添加全局样式 */
page {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
- 对于特定组件，可以这样处理：
<view class="safe-area">
<!-- 内容 -->
</view>
<style>
.safe-area {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
</style>
- 在JS中获取安全区高度：
uni.getSystemInfo({
success(res) {
const safeArea = res.safeArea;
console.log('安全区域信息:', safeArea);
}
});
- 对于滚动组件，建议使用padding代替固定高度：
scroll-view {
padding-bottom: env(safe-area-inset-bottom);
}