h5页面适配iPhone X的方法

一.原生适配iphoneX

原生适配很简单,查看机型图:

 h5页面适配iPhone X的方法

只要用

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

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

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

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

h5页面适配iPhone X的方法

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取值如下:

h5页面适配iPhone X的方法

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;*/
/*}*/
}
上一篇:css 中文字体 unicode 对照表


下一篇:投行的码工 Dead-end job