手机h5页面是什么，苹果手机适配h5页面的方法

在这篇文章中，寇丁学院的小编会和大家分享一个教程，即如何适配客户端H5页面的教程。对此有兴趣的可以关注小编了解一下。文章中将列出代码供您参考。对HTML5开发感兴趣的小伙伴，一起来看看吧。

HTML5 培训

目前很多APP设计师已经开始转向H5前端开发，但解决所有机型适配问题是我们的首要任务。无论是设计APP还是编写前端H5.，都需要考虑移动端的兼容性。由于全面屏和小刘海，之前很多手机H5页面需要配合App客户端进行适配，如下：

1、顶部横幅

之前的客户端一直采用状态栏20pt，导航栏44pt的做法。由于加了一个小刘海，所以单独使用状态栏44pt+导航栏44pt，也就是说嵌入的H5页面整体下移了24pt。

2、底部操作栏

因为是全屏，页面底部会被弯角截断，特别是底部固定悬浮的标签栏会受到严重影响。这时候需要在底部留一个空白的安全区域，页面内容的最后底线应该在手机的一角。这个安全区域的高度是 34pt。

3、适配方法

最后，根据目前唯一的手机参数，我们可以采用的适配方式有：

(1）元标记

ios11为了适配，在已有的meta标签上增加了一个新特性：-fit，如果客户端不做全屏适配，页面要覆盖全屏，可以使用这个特性：

(2）媒体查询

1、使用函数

只有设置了-fit=cover才能使用该功能

@(:(safe-area-inset-)) {

{

-:(safe-area-inset-);

-:calc(30px(假定值) + (safe-area-inset-)); //根据实际情况选择适配方式

}

}

2、利用独特的模型参数

仅@media and (-width: 375px) and (-:812px) and (---pixel-ratio:3) {

#购买{

-:34px;

}

}

(3）js判断（下面用到）

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

#购买{

-:34px;

}

}

(4）客户端协议

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

4、参数说明

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

safe-area-inset-——ios11新特性，用于设置安全区与边界的距离

375 — 设备宽度

812 - 设备高度

3——设备的分辨率

724 — 设备高度 (812) — 顶部横幅高度 (88)

34 - 底部安全区域高度

以上参数以标准1pt=1px计算。如果H5页面采用rem缩放方式，那么1pt = 1px * 3（分辨率）

以上是小编分享的如何适配客户端H5页面的教程。希望对朋友有帮助。想了解更多的可以登录考鼎学院官网进行咨询。考鼎学院是一家专业的HTML5培训机构。它不仅拥有专业的师资队伍和与时俱进的课程体系，还有大量的学生可以观看和学习。想学HTML5开发的小伙伴们赶紧行动吧。