【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphone ...

一、前言
在利用 uniapp 举行应用开发时，可能会碰到应用在 iPhone X 等带有底部安全地区的机型上显示不正常的标题。这是因为 iPhone X 及之后的机型采取了全面屏计划，屏幕底部有一个玄色的假造键地区，俗称"刘海"或"黑条"。为了避免应用内容被底部安全地区遮挡，需要举行适配。
二、适配原理
在 iOS 体系中，底部安全地区的高度是由体系动态计算的，具体高度会根据不同的机型和屏幕方向而变化。因此，在举行适配时，需要动态获取底部安全地区的高度，并根据高度调整应用内容的布局。
三、适配方法

• 在 uniapp 的pages.json文件中，对需要适配的页面添加如下配置：
  
  1. "styles": {
  2.   "safeArea": {
  3.     "bottom": "auto"
  4.   }
  5. }

  复制代码
  这将使页面在 iPhone X 及之后的机型上自动适配底部安全地区。
  
• 在页面的css文件中，添加如下样式：
  
  1. /* 适配 iPhone X 及之后的机型 */
  2. @media (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  3.   /* 设置页面底部内边距，以避开底部安全区域 */
  4.   body {
  5.     padding-bottom: constant(safe-area-inset-bottom);
  6.     padding-bottom: env(safe-area-inset-bottom);
  7.   }
  8. }

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。