有没有办法让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）值的效果。

« 2017年，互联网信息办公室代购源码网站依法对代购源码网站进行了访谈。关闭非法帐户组317万多 | 此媒体每天只更新2篇文章。商业模式值得深思 »