A5创业网
项目发布
申请报道
扫一扫，联系编辑获得审核机会
符合以下要求，获得报道机会
1. 新公司求报道
2. 好项目求报道
3. 服务商求报道
4. 投资融资爆料
中介交易 网站交易 域名交易 公众号
登录 注册
会员中心 退出
微信 
微博
手机版 
网站导航
找项目 找服务
客服热线：400-995-7855
创业
创业动态 投资融资 创业故事 众创空间
财税
工商注册 公司财税 资质办理
产权
商标 版权 专利
科技
互联网 IT业界 移动 八卦休闲
站长
网站运营 建站经验 SEO 交互设计 好站推荐
营销
营销策划 网络推广 移动营销
电商
电商资讯 电商分析 移动电商
IDC
IDC报告 云计算 服务器 安全 CDN
更多
自媒体 公众号 小程序 产品 域名 会议 数码 游戏 系统 技术
首页
创业
创业项目
科技
站长
产品
营销
电商
域名
会议
A5交易
A5营销
创业服务
当前位置：首页 > 站长 > 交互设计 > 正文 品牌
标签
专题
软文
iPhone X适配方案 及 H5调试技巧 2018-01-11 16:00 来源：人人都是产品经理 我来投稿 我要评论
创业项目优选 好项目来A5招商 ，点击入驻！
这是一份有关极速适配 iPhone X 秘笈，enjoy~
iPhone X适配方案
2017年9月苹果发布了iPhone X机型，对于它的“刘海儿”和底部Home Indicator，QQ空间H5也在第一时间做了兼容适配。在适配过程中，我们也尝试了这三种方案，如下：
解决方案1：客户端适配
客户端直接将webview的安全区域限制在除去安全区域的区域内。页面将展示在下图灰色webview内：
利弊分析
优点：H5前端开发没有任何适配工作量。
缺点：页面会限制在客户端限制的webview区域内，没有满屏效果。
解决方案2：使用media query
针对iPhoneX机型在html结构的meta标签加入
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适配，最简单直接有效的方法，不会影响到其他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的效果图。
对应代码：
顶部
底部
利弊分析
优点：符合标准的适配，灵活运用的话，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一般就会出来了。
这种方法对于我们要调试线上H5的其他问题、要测试其他iOS设备找不到真机时同样适用。
最后
经过分析，使用官方提供的新属性是三种里面较佳的方案，不过使用在适配过程中应当整体考虑所有机型，webview的类型及布局、还有横竖屏对contstant(safe-area-inset-X)/env(safe-area-inset-X)值的影响。
来源：https://isux.tencent.com/articles/isux-h5-in-iphone.html
题图来自 Unsplash，基于 CC0 协议
