IOS刘海屏H5 CSS适配

原文发自个人博客：柴犬工做室

在hybrid中，会遇到native把全屏交给webview的状况，在iphone刘海屏手机上就须要作刘海屏、底部小黑条适配了

safe area / 安全区域

iphonex以后引入的新概念，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，以下图所示：

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX等刘海屏， 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置 三个值：

• auto 默认
• contain 可视窗口彻底包含网页内容，左图
• cover 网页内容彻底覆盖可视窗口，即页面彻底充满屏幕，右图。适配关键！

<meta name="viewport" content="viewport-fit=cover">
复制代码

constant(safe-area-inset-*)函数

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设获取安全区域与边界的距离，有四个预约义的变量（单位是px）：

• safe-area-inset-left：安全区域距离左边界距离，横屏时适配
• safe-area-inset-right：安全区域距离右边界距离，横屏时适配
• safe-area-inset-top：安全区域距离顶部边界距离，竖屏下刘海屏为44px，iphone6系列20px，竖屏刘海适配关键
• safe-area-inset-bottom：安全区域距离底部边界距离，竖屏下为34px，竖屏小黑条适配关键

适配的核心是：经过 constant() 能够获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。

Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。在不支持env( )的浏览器中，会自动忽略这同样式规则，不影响网页正常的渲染。为了达到最大兼容目的，咱们能够 constant( ) 和 env( ) 同时使用。

padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
复制代码

@supports隔离兼容模式

使用@supports查询机型是否支持 constant() / env()实现兼容代码隔离：

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
  body {
    /* 适配齐刘海*/
    padding-top: constant(safe-area-inset-top);

    /* 兼容 */
    /* padding-top: env(safe-area-inset-top); */

    /* padding-top: calc(40px(原来的bottom值) + constant(safe-area-inset-top)); */

    /* 适配底部黑条*/
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
复制代码

可是，实际需求个别安卓也会成功进入这个判断，所以加上-webkit-overflow-scrolling: touch的判断能够有效规避安卓机。

这种状况在chrome中没法模拟出来，须要真机

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {}
复制代码

精确到机型作适配

经过宽高、像素比来判断机型，也能够作具体适配：

这种状况在chrome中能够模拟出来

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  
}
复制代码

固然可使用scss/less等等，写机型判断的全局变量，使用时直接使用变量

//scss
// iphone x/xs/11 pro
$device-x: "screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)";
// iphone xr/11
$device-xr: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)";
// iphone x/xs/11pro max
$device-xmax: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)";
复制代码

@media #{unquote($device-x)},
       #{unquote($device-xr)},
       #{unquote($device-xmax)} {
        // do something
       }
复制代码

等iphone12......

原文发自个人博客：柴犬工做室