【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphoneX 机型）底部安全区域适配（避开底部黑条虚拟键）

一、前言

在使用 uniapp 进行应用开发时，可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计，屏幕底部有一个黑色的虚拟键区域，俗称"刘海"或"黑条"。为了避免应用内容被底部安全区域遮挡，需要进行适配。

二、适配原理

在 iOS 系统中，底部安全区域的高度是由系统动态计算的，具体高度会根据不同的机型和屏幕方向而变化。因此，在进行适配时，需要动态获取底部安全区域的高度，并根据高度调整应用内容的布局。

三、适配方法

1. 在 uniapp 的pages.json文件中，对需要适配的页面添加如下配置：

   "styles": {
     "safeArea": {
       "bottom": "auto"
     }
   }
   

   这将使页面在 iPhone X 及之后的机型上自动适配底部安全区域。

2. 在页面的css文件中，添加如下样式：

   /* 适配 iPhone X 及之后的机型 */
   @media (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
     /* 设置页面底部内边距，以避开底部安全区域 */
     body {
       padding-bottom: constant(safe-area-inset-bottom); 
       padding-bottom: env(safe-area-inset-bottom); 
     }
   }
   

   这将在 iPhone X 及之后的机型上，为页面的底部添加一个内边距，以避开底部安全区域。

四、总结

通过以上适配方法，可以让以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphoneX 机型）底部安全区域适配，避免底部黑条虚拟键对应用内容的遮挡。在实际开发中，需要根据具体需求和页面布局进行调整，以确保应用在不同机型上的显示效果和用户体验。