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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 移动端适配兼容--ios系统iphoneX等机型底部小横条处理，app嵌入的适配处理 -> 正文阅读

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

<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);
}