移动端适配兼容--ios系统iphoneX等机型底部小横条处理，app嵌入的适配处理

紫轩阁

于 2022-02-24 15:40:00 发布

阅读量4.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： ios 前端

本文链接：https://blog.csdn.net/slice_93/article/details/123113128

本文介绍了如何在移动端进行页面适配，包括设置`<meta>`标签以适应不同设备和浏览器，以及利用`van-nav-bar`和`van-number-keyboard`组件处理顶部和底部安全区的适配。在样式公共配置中，使用`constant()`和`env()`确保在iOS和Android设备上的底部安全区填充正确。同时，对于固定底部元素，添加相应属性并避免透明以保持界面完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
    <!-- 开启顶部安全区适配 -->
    <van-nav-bar safe-area-inset-top />
    <!-- 开启底部安全区适配 -->
    <van-number-keyboard safe-area-inset-bottom />

然后在样式公共配置页：添加constant(),env() ,一定要按顺序来

html,
body,
#app {
  font-family: PingFang SC, Avenir, Helvetica, Arial, sans-serif;
  width: 100%;
  min-height: 100%;
  font-size: 26px;
  background: #f4f4f4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}