移动端h5开发记录（踩坑之旅）【IOS、Safari、兼容适配等】

1.（Tips: 千万不要用，常规页面滚动就用body自身的滚动）在外层div限高100vh，内层div增加overflow-y: auto，在safari下滚动会有许多奇奇怪怪的问题

2. position: fixed中的input框聚焦软键盘弹出，IOS下会有光标错位问题

// IOS 9 实测有效
html, body {
  -webkit-overflow-scroll: touch;
}

3. 滚动穿透问题（实测的此方法兼容性最好，兼容IOS，实测iphone X也有效）

body.overflowHide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

弹窗展开时给body增加class="overflowHide"，同时记录

const top = window.scrollY;

动态设置top为-${top}px
弹窗收起时移除该class，设置top为0，调用window.scrollTo(0, top)恢复原滚动位置

4. 兼容iphone X安全区

第一步：设置网页在可视窗口的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

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

只有设置了 viewport-fit=cover，才能使用 env()。

第二步：页面主体内容限定在安全区域内

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

第三步：fixed 元素的适配

// 原吸底元素增加以下样式
{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}
// 加一个空的颜色块
{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
  background: hsla(0, 0%, 100%, 0.9);  // 我觉得好看
}

参考：https://aotu.io/notes/2017/11/27/iphonex/index.html