发布时间：2022-8-29 分类： 行业资讯
有没有办法让iPhone X适应速度？今天，这位优秀的文腾设计师以QQ空间H5项目为例，分享最快的改编方法！
一. iPhone X适配方案
2017年9月，Apple发布了iPhone X型号。对于其“刘海尔”和底部的家庭指标，QQ空间H5也是第一次兼容。在适应过程中，我们还尝试了以下三个选项。
1. 客户端适配
解决方案
客户端直接将webview的安全区域限制为删除安全区域的区域。该页面将显示在下面的灰色webview中：
利弊分析
优点：H5前端开发没有任何适应工作量。
缺点：页面将仅限于客户端限制的webview区域，并且没有全屏效果。
2. 使用media query
解决方案
对于iPhoneX模型，在html结构中添加元标记：
< meta name=” viewport”含量=”的…，视口配合=盖”的/>
添加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对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）。 area-inset-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的效果。
对应代码：
<！DOCTYPE html>
< HTML>
< HEAD>
< meta charset=” utf-8″>
<标题>试验< /标题>
< meta name=” viewport” content=” width=device-width，initial-scale=1，minimum-scale=1，maximum-scale=1，user-scalable=no，viewport-fit=cover” />
< style type=” text/css”>
Html {
背景色: FFCD00;
}
Html，身体{
宽度: 100％;
高度: 100％;
}
身体，div {
保证金: 0;
填充: 0;
}
。主要{
字体大小: 24px;
文本对齐:中心;
宽度: 100％;
高度: 100％;
填充顶部:常量（safe-area-inset-top）;
填充顶部: env（safe-area-inset-top）;
填充底部:常量（安全区域插入底部）;
填充底部: env（安全区域插入底部）;
Box-sizing: border-box;
显示: flex;
Flex方向:列;
Justify-content: space-between;
}
< /风格>
< /头>
<身体GT;
< div class=” main”>
< div class=” top”>———— top————</div>
< div class=” bottom”>———— bottom————</div>
</DIV>
< /体>
</HTML>
利弊分析
优点：符合标准适应性，如果灵活使用，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）值的效果。
