赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.1K 0 0

有么方法可极速适配iPhone X ?今天这篇好文腾讯设师以QQ空间H5的项目例,给家分享的配方法!

一. iPhone X适配方案

20179月苹果发布了iPhone X机型,对于它的「刘海儿」底部Home Indicator,QQ空间H5也第一时间了兼配。配过程中,我们也试了这三种方案,如下。

1. 客户端适配

解决案

客户端接将webview安全区域限制在除去安全区域区域内。页将展示在下图灰色webview内:

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

利弊析

  • 优点:H5前端开发没有任何适配工作量。
  • 缺点:页面在客户端的webview区域内,没有满屏效果。
2. 使用media query

解决案

针iPhoneX型在html结构meta标签加入:

<meta name=”viewport” content=”…,viewport-fit=cover” />

在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 的技巧揭秘!

利弊分析

  • 优点:对于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)较大值。

总结如下图:

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

了解了以况后,致可以知道如果配一普通H5页面的顶部时,可以meta标签的viewport属性中加入:

<meta name=”viewport” content=”…,viewport-fit=cover” />

然后需的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的值是基「果局接触非安区域才赋值」。所以在不同情况下有不同表现。下表所示:

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

适配结果

这里展示了iPhone8 / iPhone X (iOS11.2)透顶状态栏/透顶标题栏/普通标题栏打开适配H5的效果图。

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

对应代码:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>test</title>
<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 {
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 class=”main”>
<div class=”top”>————顶部————</div>
<div class=”bottom”>————底部————</div>
</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模拟器,并点击行按钮即可。

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

安装应用

Xcode直接编译客户端码。或者让客户端发编译一份模拟器版本的.app文件,将其拖运行的模拟器屏幕,应用就功安装了。

H5 调试

安装应用后,应用里访问H5页面,然后打Safari(需启Safari的发具),单中选择发-Simulator-页面址 ,就可以用Safari的检查器对其作调试了。(当多页面址,将鼠标移至二级单的某一页面址时,模拟器页面屏幕会蓝色遮罩出时则选中了本页面址),些时候Safari识别不到模拟器,只需退出Safari,点一下模拟器屏幕,再重新打Safari一般就会出了。

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

这种方法对于我们调试线H5的其他问题、测试其他iOS设备找不到真机时同样用。

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

最后

经过分析,使用官提供新属性是三里较佳案,不过使用在适配过程应体考虑所有型,webview类型及布局、有竖屏contstant(safe-area-inset-X)/env(safe-area-inset-X)值影响。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本篇研究方法——对比法,是社会科学中运用较广的方法。对比法旨在将有一定关联的现象和概念,进行比较对照,判断异同、分析缘...
支付设计
今天我们来聊一聊特斯拉最新的车型 Model 3的中控大屏,这是一块具有标志性意义的中控设计。Model 3 的HMI堪称是对汽车行业的...
交互设计
三木自习室:转眼就到了2018年了,自从写完上一篇文章后,差不多有半年多没写自己的东西了,这半年在新的公司,新的工作岗位...
UI设计师
一、可用性价值 动效很容易被象成某种增强愉悦的东西,自身并不具备什么价值。常常被当做可有可无部分,通常作为最后一步点缀...
交互设计
@青铜央央 :开始注意和观察电梯的按钮面板,是因为觉察到自己因常乘的两部电梯设计细节方面的种种不同而陷入了混乱。电梯常...
交互设计
用户心理学上说,故事是人处理信息的最佳形式。故事非常有效,它能把注意力牢牢抓住,还能帮助用户处理信息,向用户暗示因果...
品牌升级
改变总是不可避免的。没有改变,就没有今天的我们。每天,改变都在以一种难以察觉的方式发生,悄无声息地成就着我们人生每一...
经验分享
在下面这幅图中,哪一个盘子会让你吃得更少?是用20cm的小盘子,还是直径30cm的大盘子?凭直觉,我们会觉得较小的盘子会让人...
用户体验