腾讯设计师：极速适配 iPhone X 的技巧揭秘！

2018-01-15 22:11:23 来源：易采站长用户投稿作者：admin

　　有甚么办法能够极速适配iPhone X ?明天那篇好文腾讯设想师以QQ空间H5的项目为例，给各人分享最快的适配办法!

　　一. iPhone X适配计划

　　2017年9月苹果公布了iPhone X机型，关于它的「刘海女」战底部Home Indicator，QQ空间H5也正在第一工夫做了兼容适配。正在适配历程中，我们也测验考试了那三种计划，以下。

　　1. 客户端适配

　　处理计划

　　客户端间接将webview的宁静地区限定正在撤除宁静地区的地区内。页里将展现正在下图灰色webview内：

　　利害阐发

　　长处：H5前端开辟出有任何适配事情量。

　　缺陷：页里会限定正在客户端限定的webview地区内，出有谦屏结果。

　　2. 利用media query

　　处理计划

　　针对iPhoneX机型正在html构造的meta标签参加：

　　正在css中参加：

　　@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

　　…{ padding-top: 44px; }

　　…{ padding-bottom: 34px; }

　　}

　　适配结果

　　利害阐发

　　长处：关于iPhone X适配，最简朴间接有用的办法，没有会影响到其他iOS机型。

　　缺陷：关于齐屏/透顶题目栏/横屏状况皆要用差别的css代码停止适配，不敷灵敏。别的，假如苹果下一年又公布了相似iPhone X plus那样的机型，适配事情便要从头去过。

　　3. 利用苹果供给的新属性

　　处理计划

　　苹果关于iPhone X上H5页里的适配，供给了特别属性撑持，包罗meta标签的viewport属性值中参加viewport-fit战参加constant(safe-area-inset-X)战env(safe-area-inset-X) ，那些属性是取iOS11以上的一切iPhone机型(不只仅包罗iPhone X)皆相干的，故以iOS版本为区分详细阐发一下齐屏下的H5页里：

　　(1)针对iOS11.0以下体系：

　　将没有辨认H5页里meta标签下的viewport-fit及constant(safe-area-inset-X)/env(safe-area-inset-X)属性。

　　(2)针关于iOS11.0-iOS11.1的体系：

　　当设置了viewport-fit=cover，H5页里会笼盖页里宁静地区齐屏展现，可是那样会带去页里元素会被「刘海女」战底部Home Indicator遮挡成绩，以是苹果供给正在css中设置constant(safe-area-inset-X)间隔去躲避遮挡成绩。

　　那些正在差别webview下会表示差别的值，我们留到前面阐发。

　　别的，页里没有减viewport-fit=cover默许viewport-fit=contain/auto，也便是我们看到的页里不克不及笼盖宁静地区的状况，此时constant(safe-area-inset-X)的值皆为0。

　　以是正在meta标签的viewpoint中减viewport-fit=cover时iOS10战iOS11下constant(safe-area-inset-X)值的表示是纷歧样的。

　　(3)针对iOS11.2及iOS11.2以上的体系：

　　constant() function改成了env()，其他取iOS11.2以下表示一样(详睹第2面)。别的，iOS11.2新删了CSS function: min()战max()。比方：

　　padding-left: max(12px, env(safe-area-inset-left));

　　正在env(safe-area-inset-left)值果为webview变革时价也能够做出响应变革，与12px战env(safe-area-inset-left)的较年夜值。

　　总结以下图：

　　正在理解了以上状况后，大抵能够晓得假如要适配一个一般H5页里的顶部时，能够正在meta标签的viewport属性中参加：

　　然后正在需求的class内里参加：

　　…{

　　padding-top: 20px; /* iOS 10 */

　　padding-top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */

　　padding-top: env(safe-area-inset-top); /*iOS 11.2 */

　　}

　　正在iOS11机型上，H5参加viewport-fit=cover后，safeArea的值是基于「假如规划打仗了非宁静地区才会赋值」。以是正在差别状况下会有差别表示。以下表所示：

　　适配成果

　　那里展现了iPhone8 / iPhone X (iOS11.2)透顶形态栏/透顶题目栏/一般题目栏下翻开适配H5的结果图。

　　对应代码：

　　<!DOCTYPE html>

　　<html>

　　<head>

　　html {

　　background-color: #FFCD00;

　　}

　　html,body{

　　width: 100%;

　　height: 100%;

　　}

　　body, div{

　　margin: 0;

　　padding: 0;

　　}

　　.main{

　　font-size: 24px;

　　text-align: center;

　　width: 100%;

　　height: 100%;

　　padding-top: constant(safe-area-inset-top);

　　padding-top: env(safe-area-inset-top);

　　padding-bottom: constant(safe-area-inset-bottom);

　　padding-bottom: env(safe-area-inset-bottom);

　　box-sizing: border-box;

　　display: flex;

　　flex-direction: column;

　　justify-content: space-between;

　　}

　　</style>

　　</head>

　　<body>

　　</div>

　　</body>

　　</html>

　　利害阐发

　　长处：契合尺度的适配，灵敏使用的话，H5正在差别webview下翻开皆能够有完善的展示。且思索了将来机型的适配。

　　缺陷：适配iPhone X时需求同时思索其他iOS11机型下会没有会遭到影响。

　　以上只阐发横屏webview下的状况，横屏webview能够自止经由过程模仿器停止研讨。接下去引见一下模仿器的利用。

　　两. iPhone X模仿器 H5调试

　　引见

　　参加适配代码后，正在出iPhone X的状况下，能够经由过程iPhone X模仿器调试，像脚机QQ/脚机空间里的H5页里，能够经由过程正在模仿器上装置脚机QQ/脚机空间app，然后挪用Safari调试。

　　运转模仿器

　　体系请求：

　　Mac OS 10.12.6以上

　　Xcode9.0以上

　　步调：正在Xcode翻开一个空缺项目，挑选iPhoneX模仿器，并面击运转按钮便可。

　　装置使用

　　正在Xcode上间接编译客户端代码。大概让客户端开辟编译一份模仿器版本的.app文件，将其拖进运转的模仿器屏幕，使用便胜利装置了。

　　H5 调试

　　装置使用后，正在使用里会见H5页里，然后翻开Safari(需求开启Safari的开辟东西)，正在菜单当选择开辟-Simulator-页里地点，便能够用Safari的查抄器对其做调试了。(当有多个页里地点，将鼠标移至两级菜单的某一个页里地点时，模仿器页里屏幕会有蓝色遮罩呈现时则是选中了本页里地点)，有些时分Safari辨认没有到模仿器，只需退出Safari，面一下模仿器屏幕，再从头翻开Safari普通便会出去了。