发布时间：2022-10-3 分类： 行业资讯
这是关于适应iPhone X的秘诀，享受〜
iPhone X适应解决方案
2017年9月，Apple发布了iPhone X型号。对于其“刘海尔”和底部的家庭指标，QQ空间H5也是第一次兼容。在改编过程中，我们还尝试了以下三个选项：
解决方案1：客户端适应
客户端直接将webview的安全区域限制为删除安全区域的区域。该页面将显示在下面的灰色webview中：
利弊分析
优点：H5前端开发没有任何适应工作量。
缺点：页面将仅限于客户端限制的webview区域，并且没有全屏效果。
解决方案2：使用媒体查询
加入iPhoneX模型的html结构的元标记
含量=”的…，视口配合=盖”的/>
添加css
@media only屏幕和（设备宽度: 375px）和（设备高度: 812px）和（-webkit-device-pixel-ratio: 3）{
… {padding-top: 44px; }
… {padding-bottom: 34px; }
}
适应效应：
利弊分析
优点：对于iPhone X适应，最简单，最有效的方式不会影响其他iOS机型。
缺点：对于全屏/顶部标题栏/横向屏幕，必须适应不同的css代码，这不够灵活。此外，如果Apple明年推出类似iPhone X plus的型号，那么适应性工作将会重新开始。
解决方案3：使用Apple提供的新属性
Apple对iPhone X上H5页面的改编提供了特殊的属性支持，包括meta标签的viewport属性，viewport-fit和常量（safe-area-inset-X）和env（safe-area-inset-X） ），这些属性与iOS11以上的所有iPhone型号（不仅仅是iPhone X）有关，因此iOS版本用于全屏分析H5页面：
（1）适用于iOS11.0及以下系统
H5页面的元标记下的视口适合和常量（安全区域插入-X）/env（安全区域插入-X）属性将无法识别。
（2）iOS11.0-iOS11.1系统
当设置了viewport-fit=cover时，H5页面将覆盖页面安全区域的全屏显示，但这将导致页面元素被“刘海尔”和底部的主页指示符遮挡，因此Apple提供了常量在css。安全区域插入-X）距离，以避免遮挡问题。
这些将在不同的Web视图下显示不同的值，我们将留待以后进行分析。
此外，页面不添加viewport-fit=cover默认viewport-fit=contains/auto，也就是说，我们看到的页面无法覆盖安全区域。此时，常量（safe-area-inset-X）的值为0。
因此，当viewport-fit=cover添加到元标记的视图中时，常量（safe-area-inset-X）值的性能在iOS10和iOS11之间不同。
（3）适用于iOS 11.2和iOS 11.2或更高版本的系统
constant（）函数更改为env（），其余部分与iOS11.2相同（参见第2点）。此外，iOS 11.2增加了CSS函数: min（）和max（）。例如：
填充左: max（12px，env（safe-area-inset-left））;
env（safe-area-inset-left）值的值也可以随着webview的变化而改变，取较大的值12px和env（safe-area-inset-left）。
总结如下：
在理解了上述情况之后，您可以粗略地知道，如果您想要适合普通H5页面的顶部，可以将其添加到元标记的viewport属性中：
然后添加所需的类：
… {
填充顶部: 20px;/* iOS 10 */
填充顶部:常量（safe-area-inset-top）;/* iOS 11.0-iOS 11.1 */
填充顶部: env（safe-area-inset-top）;/* iOS 11.2 */
}
在iOS11模型上，在H5加入viewport-fit=cover之后，safeArea的值基于“如果布局触及非安全区域，则会为其分配值”。所以在不同情况下会有不同的表现。如下表所示：
适应结果：
这显示了在iPhone8/iPhone X（iOS11.2）顶部状态栏/顶部标题栏/普通标题栏下打开改编H5的效果。
对应代码：
————顶————————底部————利弊分析
优点：符合标准适应性，如果灵活使用，H5可以在不同的网页浏览下打开时完美显示。并考虑适应未来的模型。
缺点：在适应iPhone X时，您需要考虑是否会影响其他iOS11型号。
以上仅分析了垂直屏幕webview下的情况，水平屏幕webview可以由模拟器本身研究。接下来，我们来谈谈模拟器的使用。
iPhone X模拟器H5调试
引言
添加适配代码后，在没有iPhone X的情况下，您可以通过iPhone X模拟器进行调试，如移动QQ /移动空间中的H5页面，您可以在模拟器上安装移动QQ /移动空间应用程序，以及然后调用Safari。调试。
运行模拟器
系统要求：
Mac OS 10.12.6及更高版本
Xcode9.0或以上
步骤：在Xcode中打开一个空白项目，选择iPhoneX模拟器，然后单击“运行”按钮。
安装应用
直接在Xcode上编译客户端代码。或者让客户端开发并编译.app文件的模拟器版本，将其拖动到正在运行的模拟器屏幕中，并成功安装应用程序。
H5调试
安装应用程序后，访问应用程序中的H5页面，然后打开Safari（您需要打开Safari的开发工具），在菜单中选择开发模拟器页面地址，您可以使用Safari的检查程序进行调试。 （当有多个页面地址时，将鼠标移动到第二级菜单的页面地址，模拟器页面屏幕在选中时将显示蓝色掩码，选择页面地址），有时Safari无法识别模拟。只需退出Safari，单击模拟器屏幕，然后重新打开Safari。
当我们想调试在线H5上的其他问题并测试其他iOS设备无法找到真实机器时，此方法也适用。
最后
经过分析，使用官方提供的新属性是三个选项中最好的，但整个过程的使用应考虑所有模型，webview的类型和布局，以及水平和垂直屏幕对的常数（ safe-area-inset -X）/env（safe-area-inset-X）值的效果。
资料来源：https://isux.tencent.com/articles/isux-h5-in-iphone.html
该地图来自Unsplash，基于CC0协议
