对iphoneX及以上适配

本文主要介绍对iphoneX及以上适配。提供css和js的适配方式。

一、设置网页在可视窗口的布局方式

注：viewport-fit=cover使得页面内容完全覆盖整个窗口

二、页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */ 
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

注：只有设置了 viewport-fit=cover，才能使用 env()。env() 跟 constant() 需要同时存在，而且顺序不能换。

三、fixed 元素的适配

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

注：当然不是只能用padding，也可以使用margin等属性

四、拓展

4.1支持算法：

{
  height: calc(60px(假设值) + constant(safe-area-inset-bottom));
  height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

4.2空的颜色块：

{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background-color: #fff;
}

4.3 js处理

if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){
        $(".class").css("padding-bottom","34px");
}

五、粗暴解决，适用于H5内嵌App的安全距离

viewport-fit=contain meta标签,使页面展示在安全区