在这篇文章里，我想和大家分享一个教程，就是iphoneX如何适配客户端H5页面的教程。感兴趣的朋友可以跟边肖了解一下。文中会有代码列出来供大家参考，对HTML5开发感兴趣的朋友会了解的。

HTML5培训

现在很多APP设计师合作伙伴都先转向了H5前端开发，但是解决所有iPhone和Android机型的适配问题才是我们的重中之重。无论是设计APP还是编写前端H5，都要考虑移动端的兼容性。因为iphoneX是全屏的，还留着小刘海，所以之前很多手机H5页面都需要联系App客户端进行适配，如下:

1.顶部横幅

之前的客户端一直接受状态栏20pt+导航栏44pt的做法。因为iPhone上有小刘海，所以iPhone只接受状态栏44pt+导航栏44pt，也就是说嵌入式H5页面整体下移24pt。

2.底部操作栏

由于iphoneX是全面屏，页面底部会被一个弯曲的边角切掉，尤其是底部有固体悬浮的tab栏会受到严重影响。这时候你需要在底部留一个空的不安全区域，页面内容的最终底线应该在手机的角落。这个安全区的高度是34英尺。

3.适应模式

综上所述，对于iphoneX特有的手机参数连接，我们可以接受以下适配方式:

(1)元标签

Ios11在现有的viewport meta标签中增加了一个功能，以适应iphoneX: viewport-fit。如果客户端不适应全屏，那么页面希望被全屏覆盖，可以使用这个功能:

ltmeta name = ” viewport ” content = ” width = device-width，viewport-fit=cover ” >

(2)媒体询问

1.练习常量功能

仅当设置了viewport-fit=cover时，才能使用常量功能。

@ supports(bottom:constant(safe-area-inset-bottom)){

选择器{

padding-bottom:常量(安全区域-插入-底部)；

Padding-bottom:calc(30px(假定值)+常量(safe-area-inset-bottom))；//根据凭证的实际情况选择适配方式。

}

}

2.锻炼iphoneX的怪异模型参数

@media only屏幕和(设备宽度:375像素)和(设备高度:812像素)和(-webkit-device-pixel-ratio:3) {

如何做互联网营销，新手快速入门互联网营销的必备知识。

#购买{

填充-底部:34px

}

}

(3)js判断(以下简称接受Jquery)

if($(窗口)。width()= = = 375 amp； amp$(窗口)。height()= = = 724 amp； ampwindow.devicePixelRatio === 3){

#购买{

填充-底部:34px

}

}

(4)客户端协议

也可以请求客户端基于客户端协议查询是否是iphoneX，以保持与客户端一致。

4.参数注释

上述代码中的参数注释如下:

Safe-area-inset-bottom-ios11增加了设置安全区和边界之间距离的功能。

375——iPhone设备的宽度

812——Iphone设备的高度

iPhone设备的分辨率

724——iPhone设备的高度(812) ——顶部围栏的高度(88)

34—底部安全区域的高度

以上参数以标尺1pt=1px计算。如果H5页面接受rem模式的缩放，那么1pt = 1px * 3(iPhone的分辨率)。

以上是边肖分享的关于如何将iphoneX适配到客户端H5页面的教程。希望对朋友们更有帮助。想了解更多的可以登录官网咨询。扣顶学苑是一家专业的HTML5培训机构，不仅有专业的老师和与时俱进的课程体系，还有大量的学员观看和学习。想学好HTML5，请赶快行动吧。

客服微信:(181628402)本文链接:https://www.n5w.com/299101.html