h5页面适配iPhone X的方法

项目接近尾声，测试时突然想起还有iphoneX需要适配，虽然页面都是自适应，但是由于iPhone X的特殊性，还是需要特殊对待。因为这个h5项目嵌入在原生项目中，适配就会有有种方式：1.在原生中用原生的的方法适配 2.在前端页面中用h5的方式适配。

一.原生适配iphoneX

原生适配很简单，查看机型图：

只要用

#define KIsiPhoneX ([UIScreen mainScreen].bounds.size.height>800.0f

判断是iPhone X的机型时，就在控制器的顶端，和底部留出 44px和34px的距离，然后webView装在这个控制器内就OK！

优点：在原生中适配，h5页面不用更改任何一句代码。

缺点：1)意味着如右图某些通栏页面无法实现，

2）顶部和底部显色固定，无法适应页面颜色，（王者荣耀用链接地址传递参数的形式在原生中完美适配，不太明白原理）

一.h5页面适配iphoneX

1.viewport-fit适配方案

PhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。css 函数 env() 和 constant()这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

env 函数

必须在 ios >= 11.2 才支持

constant 函数

必须 ios < 11.2 支持

viewport-fit取值如下：

safe-area-inset-top ：视口顶部到安全区域的距离（以CSS像素为单位）,一般情况下是 0。

safe-area-inset-right ：视口最右边到安全区域的距离（以CSS像素为单位）,一般情况下是 0。

safe-area-inset-left ：视口最左边到安全区域的距离（以CSS像素为单位）在刘海全屏的时候 top 为 88px。

safe-area-inset-bottom ：视口底部到安全区域的距离（以CSS像素为单位）刘海全屏的条件下是 34px。

constant() 是CSS的函数，可以把以上几个距离转换成我们常用的属性值。

1) 当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。

2).当设置viewport-fit:cover时，具体使用方法为

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

body {padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-left: constant(safe-area-inset-left); //如果未竖屏时为0padding-left: env(safe-area-inset-left); //如果未竖屏时为0padding-right: constant(safe-area-inset-right); //如果未竖屏时为0padding-right: env(safe-area-inset-right); //如果未竖屏时为0padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34pxpadding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

2.媒体查询

@media screen and (device-width:375px) and (device-height:812px){
//在这里做iPhone X的判断// #app {//margin-top: 88px;//}
}

3.@supports 隔离兼容模式

@supports (bottom: env(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {/*在这里做iphoneX的判断*//*#app {*//*margin-top: 88px;*//*}*/
}

因为每个项目的具体写法不同，只提供方法，具体使用自己选择！

可以参考： https://vip.kingdee.com/article/9707

h5页面适配iPhone X的方法相关推荐

H5页面在iphone手机底部出现留白的情况
今天在测试的时候,发现自己的h5页面在iphone手机上,有刘海儿和底部弧形时,底部出现了留白,解决方案是: 找到整个项目的public,index.html,找到其中的meta,加入viewport ...
苹果x css适配,CSS如何适配iPhone全面屏 CSS适配iPhone全面屏方法
本篇文章小编给大家分享一下CSS适配iPhone全面屏方法,通过文中代码详细介绍了适配方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.media query方式 / ...
移动端 H5页面适配
一.基础概念在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
H5 页面适配所有 iPhone 和安卓机型的六个技巧
目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 25学堂今天跟大家来回 ...
H5 页面适配几种展现形式
1.contain 模式:以内容中心为基点按照视觉稿的宽高比缩放以适配窗口显示全页面内容,窗口与内容的宽度比或高度比之间较小者缩放填满窗口,当窗口宽高比和视觉稿不同时,另一方向的两侧出现留空部分. 2 ...
关于H5页面适配的问题
1.问题描述适配的目标:在不同尺寸的手机设备上,页面"相对性的达到合理的展示(自适应)"或者"保持统一效果的等比缩放(看起来差不多,但不是完全等比例,对于字体我们并不喜 ...
h5适配华为手机_手机端H5页面适配踩坑
这两天在公司做手机端H5页面,第一次开发没什么经验,对rem, pt, ppi, dpr这些概念完全不懂,看了很多博客,现总结如下. 对于不同像素宽度的手机,如何做到每一个元素自动缩放? rem: f ...

h5页面适配iPhone X的方法

h5页面适配iPhone X的方法相关推荐

最新文章

热门文章