移动版Safari顶部栏与header间出现边框的适配问题咨询

可通过Meta标签配置+CSS样式调整实现消除分隔线的效果，无需用户将网站添加到主屏幕，适配所有带刘海的iOS机型。

第一步：配置Viewport Meta标签 #

在页面<head>中修改viewport配置，开启页面全屏占满能力：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
核心属性viewport-fit=cover会让页面渲染范围覆盖包括刘海区域在内的整个屏幕，消除浏览器默认留的顶部边距。

第二步：调整Header样式适配安全区域 #

给顶部header添加对应CSS规则，避免内容被刘海遮挡，同时对齐背景消除分隔线：

header {
  /* 固定定位保持顶部吸顶，非吸顶header可删除该属性及top/left/width */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  /* 适配刘海安全区域，可根据需要叠加自定义的顶部内边距 */
  padding-top: env(safe-area-inset-top);
  /* 保持和原有header背景色完全一致 */
  background-color: #你的header实际背景色;
}

可选优化 #

如果页面根背景色和header背景色不一致，可给body添加顶部渐变填充，彻底消除色差导致的分隔视觉效果：

body {
  background: linear-gradient(to bottom, #你的header实际背景色 calc(env(safe-area-inset-top) + 你的header实际高度), 你的页面原有背景色 0);
}

兼容性说明 #

该方案支持iOS 11及以上系统版本，普通Safari浏览器访问即可生效，无需依赖Web App模式。

内容的提问来源于stack exchange，提问作者d3rpp