ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【移动端应用开发】以 uniapp 打包成 APP 或小程序后或 H5 后 IOS（iphone [打印本页]

作者: 惊落一身雪 时间: 2024-6-11 11:23
标题: 【移动端应用开发】以 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企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)