移动端iphonex适配,

　　前言

　　目前很多APP设计师已经开始转向H5前端开发，但是解决所有iPhone和Android机型的适配问题才是我们的重中之重。无论是设计APP还是编写前端H5。应考虑移动终端的兼容性。

　　由于iphoneX具有全屏和小刘海，许多以前的移动H5页面需要与App客户端进行适配，如下所示：

　　1.顶部横幅

　　以前的客户端一直采用20pt状态栏和44pt导航栏的做法。因为iPhone的刘海比较小，所以状态栏44pt和导航栏44pt都是iPhone单独使用的，也就是说内嵌的H5页面整体下移了24pt。

　　2、底部操作栏

　　由于iphoneX是全屏屏幕，页面底部会被一个弯曲的边角切掉，尤其是底部固定悬空的标签栏会受到严重影响。这时候就需要在底部留一个空白的安全区域，页面内容最后的底线要在手机的角落。这个安全区的高度是34英尺。

　　3.适应方法

　　综上所述，结合iphoneX特有的手机参数，可以采用以下适配方法：

　　(1)元标签

　　Ios11为了适应iphoneX，在现有的viewport meta标签上增加了一个新功能：viewport-fit。如果客户端不做全屏适配，那么页面想要全屏覆盖，可以使用这个功能：

　　meta= viewport content= width=device-width，viewport-fit=cover (2)媒体查询

　　1.使用常量函数

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

　　@ supports(bottom:constant(safe-area-inset-bottom)){ selector { padding-bottom:constant(safe-area-inset-bottom)；Padding-bottom:calc(30px(假设值)常量(safe-area-inset-bottom))；//根据实际情况选择适配方式}}2。使用iphoneX特有的型号参数。

　　@ media only screen and(device-width:375 px)and(device-height:812 px)and(-WebKit-device-pixel-ratio:3){ # buy { padding-bottom:34px；}}(3)js判断(以下采用Jquery)

　　if($(窗口)。width()===375 $(窗口)。height()===724 window . device pixel ratio===3){ # buy { padding-bottom:34px；}}(4)客户端协议

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

　　4.参数解释

　　上述代码中的参数解释如下：

　　safe-area-inset-bottom—IOs 11的新功能，用于设置安全区域与边界的距离375—iPhoneX设备的宽度812—iPhoneX设备的高度3—iPhoneX设备的分辨率724—顶部横幅的高度(812)34—底部安全区域的高度。以上参数都是用标准的1pt=1px计算的。如果H5页面采用zoom rem方法，则1pt=1px *。

　　总结

　　这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。