一.原生适配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); //为导航栏+状态栏的高度 88px
padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-left: env(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-right: env(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
padding-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;*/
/*}*/
}