H5及H5+app对iphoneX及以上适配

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

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

<meta name="viewport" content="width=device-width, viewport-fit=cover">

注：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-botto