微信赚钱公众号,手机h5页面是什么，苹果手机适配h5页面的方法

本篇文章扣丁学堂小编和人人分享一个教程，那就是iphoneX 适配客户端H5页面的方式教程，对此感兴趣的小伙伴可以随小编来领会一下。文章中会有代码列出供人人参考，对HTML5开发感兴趣的小伙伴来领会一下吧。

HTML5培训

现在，许多APP设计师小伙伴已经最先转向H5前端开发啦，然则解决所有iPhone和安卓机型的适配问题是我们的重中之重。无论是设计APP照样写前端H5.都是要思量移动端的兼容性。由于iphoneX做了周全屏而且还保留一块小刘海，因此许多以前的移动端H5页面需要连系App客户端做出响应的适配，详细如下：

1、顶部通栏

之前的客户端一直接纳状态栏20pt+导航栏44pt的做法。由于iphoneX多了一块小刘海，因此iphoneX单独接纳状态栏44pt+导航栏44pt，意味着内嵌的H5页面整体下移24pt。

2、底部操作栏

由于iphoneX是周全屏，页面最底部会被弯曲的拐角截掉一部分，特别是有底部牢固悬浮的tab条会严重受到影响。这时候需要底部留出一块空缺平安区域，页面内容最终的底线应在手机拐角处。该平安区域的高度为34pt。

3、适配方式

终上所述，连系iphoneX现在特有的手机参数我们可以接纳的适配方式为：

（1）meta标签

ios11为了适配iphoneX对现有的viewport meta标签新增一个特征：viewport-fit，若是客户端没有做全屏适配，那么页面想要全屏笼罩，则可使用该特征：

<meta name=”viewport” content=”width=device-width,viewport-fit=cover”>

（2）媒体查询

1、行使constant函数

只有设置了viewport-fit=cover才气使用constant函数

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

selector{

padding-bottom:constant(safe-area-inset-bottom);

padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //凭据实际情况选择适配方式

}

}

2、行使iphoneX怪异的型号参数

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {

怎样做互联网营销，新手快速入门网络营销的必要知识

#buy {

padding-bottom:34px;

}

}

（3）js判断（以下接纳Jquery）

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){

#buy {

padding-bottom:34px;

}

}

（4）客户端协议

也可以凭据客户端协议请求客户端查询是否是iphoneX，以此来保持和客户端一致。

4、参数注释

以上代码中的参数注释如下：

safe-area-inset-bottom — ios11新增特征，用于设定平安区域与界限的距离

375 — iphoneX装备的宽度

812 — iphoneX装备的高度

3 — iphoneX装备的分辨率

724 — iphoneX装备的高度(812) – 顶部通栏高度(88)

34 — 底部平安区域高度

以上参数均以尺度的1pt=1px举行盘算，若是H5页面接纳缩放的rem方式，那么1pt = 1px * 3（iphoneX分辨率）

以上就是小编给人人分享的iphoneX 适配客户端H5页面的方式教程，希望对小伙伴们有多辅助，想要领会更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训机构，不仅有专业的先生和与时俱进的课程体系，另有大量的供学员旁观学习，想要学好HTML5开发的小伙伴快快行动吧。

客服微信：（ 181628402）本文链接： https://www.n5w.com/299101.html