智唯高端建站是一家专注中小型企业网站建设、营销型网站建设、响应式网站建设公司

建站优化电话:138 2557 5516(免费SEO检测 保证收录 保证排名)
广州建站微信号
返回旧版
网站设计News
公司网站建设

iPhone X适配方案 及 H5调试技巧

关键词:广州建站 作者:智唯建站 | VISITORS: | 来源:智唯网络科技
11Jan
2018
这是一份有关极速适配 iPhone X 秘笈,enjoy~

  这是一份有关极速适配 iPhone X 秘笈,enjoy~

  

iPhone X适配方案 及 H5调试技巧

 

  iPhone X适配方案

  2017年9月苹果发布了iPhone X机型,,对于它的“刘海儿”和底部Home Indicator,QQ空间H5也在第一时间做了兼容适配。在适配过程中,我们也尝试了这三种方案,如下:

  解决方案1:客户端适配

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

  

iPhone X适配方案 及 H5调试技巧

 

  利弊分析

  优点: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适配方案 及 H5调试技巧

 

  利弊分析

  优点:对于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调试技巧

 

  在了解了以上情况后,大致可以知道如果要适配一个普通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的值是基于“如果布局接触了非安全区域才会赋值”。所以在不同情况下会有不同表现。如下表所示:

  

iPhone X适配方案 及 H5调试技巧

 

  适配结果:

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

  

iPhone X适配方案 及 H5调试技巧

 

  对应代码:

  

  

  

  

  

  

  

  

  

  

 

  

————顶部————

 

  

————底部————

 

  

 

  

  

  利弊分析

  优点:符合标准的适配,灵活运用的话,H5在不同webview下打开都可以有完美的展现。且考虑了未来机型的适配。

  缺点:适配iPhone X时需要同时考虑其他iOS11机型下会不会受到影响。

  以上只分析竖屏webview下的情况,横屏webview可以自行通过模拟器进行研究。接下来介绍一下模拟器的使用。

  iPhone X模拟器 H5调试

  介绍

关于网站制作,看看客户怎么说
***(匿名) 评价文章 广州市富腾建材公司营销网站制作服务

2016年6月,我司成功签约广州市富腾建材科技有限公司的网站制作服务,非常感谢广州市富腾建材科技有限公司对智唯网络的支持。 广州市富腾建材科技有限公司是一家专业生产...

***(匿名) 评价文章 签约三星智能锁网站制作服务

佛山建站公司智唯网络成功签署三星智能锁网站建设项目。帮助三星智能锁树立全新的品牌形象。具体包括:品牌策划、网页设计、网站程序开发、产品上传等一站式服务。 三星...

***(匿名) 评价文章 网站制作请做到六好无敌

网站建设专家-史特是最有价值的网络营销服务品牌,为您提供专业的网站策划,网站设计,网站制作服务,给众多知名企业提供过高品质的建站服务....

公司网站建设
Hi,Are you ready?
准备好开始了吗?
那就与我们取得联系吧

广州建站 感恩回馈

咨询送礼现在提交,将获得智唯网络策划专家免费为您制作
价值5880元《全网营销方案+优化视频教程》一份!
下单送礼感恩七周年,新老用户下单即送创业型空间+域名等大礼
24小时免费咨询热线0757-8108-9123
合作意向表
您需要的服务
您最关注的地方
预算
  • 验证码

直接咨询