我的生活随笔在这篇文章中，寇丁学院的小编会和大家分享一个教程，即如何适配客户端H5页面的教程。对此有兴趣的可以关注小编了解一下。文章中将列出代码供您参考。对HTML5开发感兴趣的小伙伴，一起来看看吧。
目前很多APP设计师已经开始转向H5前端开发，但解决所有机型适配问题是我们的首要任务。无论是设计APP还是编写前端H5.，都需要考虑移动端的兼容性。由于全面屏和小刘海，之前很多手机H5页面需要配合App客户端进行适配，如下：
之前的客户端一直采用状态栏20pt，导航栏44pt的做法。由于加了一个小刘海，所以单独使用状态栏44pt+导航栏44pt，也就是说嵌入的H5页面整体下移了24pt。
因为是全屏，页面底部会被弯角截断，特别是底部固定悬浮的标签栏会受到严重影响。这时候需要在底部留一个空白的安全区域，页面内容的最后底线应该在手机的一角。这个安全区域的高度是 34pt。
ios11为了适配，在已有的meta标签上增加了一个新特性：-fit，如果客户端不做全屏适配，页面要覆盖全屏，可以使用这个特性：
以上参数以标准1pt=1px计算。如果H5页面采用rem缩放方式，那么1pt = 1px * 3（分辨率）
以上是小编分享的如何适配客户端H5页面的教程。希望对朋友有帮助。想了解更多的可以登录考鼎学院官网进行咨询。考鼎学院是一家专业的HTML5培训机构。它不仅拥有专业的师资队伍和与时俱进的课程体系，还有大量的学生可以观看和学习。想学HTML5开发的小伙伴们赶紧行动吧。