safe-area 小米11适配存在问题

澄仙

stml代码：

<template name='tpl'>
<view class="page">
<safe-area class="header">
<text>动态页面内容1</text>
</safe-area>
</view>
</template>

复制代码

澄仙

用了一个临时的解决办法，处理这个问题，特发出来提供给其他有需要的人

无非就是判断这里的顶部往下一点，不管用什么办法？判断手机型号也好，判断屏幕尺寸的办法（我就用这个办法）也好
控制顶部这种情况下下来一段距离（用尺寸对比办法计算出来下撤40px）
具体代码放出来给有需要的人看（原来和vue写法一模一样，点个赞

）
也可以封到独立组件里等兼容了就可以直接从组件里去掉这段代码了

<template name='tpl'>
<view class="page">
<safe-area class="header">
<text :style="{ paddingTop: headerTop + 'px' }">页面标题</text>
</safe-area>
</view>
</template>
<script>
export default {
name: 'tpl',
apiready(){
//like created
},
data() {
return{
}
},
computed: {
headerTop() {
// 经过逻辑判断，正常情况下设0，特殊需要兼容的屏幕尺寸使用40
return '40'
}
},
methods: {
}
}
</script>
<style>
.page {
height: 100%;
}
</style>

复制代码

技术咨询-F

config.xml 沉浸式设置为true了吗？

重新编译看看

澄仙

本帖最后由澄仙于 2021-1-20 11:29 编辑

技术支持-F 发表于 2021-1-19 18:43
config.xml 沉浸式设置为true了吗？

重新编译看看

<preference name="statusBarAppearance" value="true"/>

复制代码

当然设了，我刚才检查了是设的是true 推了代码后重新打自定义loader 还是这样
小米9和小米6x 目前看都是没问题的
只有小米11这样

技术咨询-F

澄仙发表于 2021-1-20 11:28
当然设了，我刚才检查了是设的是true 推了代码后重新打自定义loader 还是这样
小米9和小米6x 目前看 ...

Android 系统版本多少

澄仙

技术支持-F 发表于 2021-1-20 11:34
Android 系统版本多少

Android 11

MIUI 12.0.17稳定版
屏幕分辨率：3200*1440

技术咨询-F

澄仙发表于 2021-1-20 11:36
Android 11

MIUI 12.0.17稳定版

已反馈给相关技术。目前没这个设备，可能需要等一段时间才能确认和适配。

澄仙

技术支持-F 发表于 2021-1-20 11:38
已反馈给相关技术。目前没这个设备，可能需要等一段时间才能确认和适配。 ...

理解，可以等哈就是反馈给你们知道这分辨率有点特别。。。

常山赵子云

能把手机拍个照没，我们看看，这个屏幕是不是前置摄像头不在状态栏区域内？

澄仙

常山赵子云发表于 2021-1-21 19:30
能把手机拍个照没，我们看看，这个屏幕是不是前置摄像头不在状态栏区域内？ ...

这是小米11用了safe-area之后的效果

拿小米6x和小米11 做了个对比

[多端开发] safe-area 小米11适配 存在问题

[多端开发] safe-area 小米11适配存在问题