设备样式兼容问题

ios 中页面滑动内容残缺问题

问题描述：

页面设置了overflow-y: auto;，在上下滑动的过程中，页面文字内容出现诡异的残缺，有时显示正常，有时显示不完整。

解决方案：

给所有子元素添加transform: translateZ(0px);

.detail-page {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.detail-page > * {
  transform: translateZ(0px);
}

viewport-fit

解决 iphone 刘海和安全区域的问题。

在 HTML 中添加viewport-fit=covermeta 标签，使页面占满整个屏幕。

<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"
/>