如何用CSS实现Safari中网页视口延伸至iPhone状态栏？

可以实现这个效果，你已经添加了正确的meta标签，接下来只需配合CSS调整布局，就能让头部图片延伸至状态栏区域，同时解决滚动截断问题：

1. 重置基础样式，消除默认间距 #

先清除html和body的默认边距、内边距，确保页面从视口最顶部开始渲染：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
}

2. 配置头部图片容器 #

假设你的头部图片放在类名为.header的容器中，设置容器从视口最顶部开始，让图片完整覆盖容器（包括状态栏区域）：

.header {
  position: relative;
  width: 100%;
  /* 根据需求设置头部高度，比如占视口高度的一半 */
  height: 50vh;
  top: 0;
}

.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 让图片顶部对齐容器，确保状态栏区域显示图片顶部内容 */
  object-position: top;
}

3. 处理主体内容（可选） #

如果页面主体内容需要避开状态栏文字遮挡，可给主体容器添加基于安全区域的顶部内边距：

.main-content {
  padding-top: env(safe-area-inset-top);
}

关键说明 #

• viewport-fit=cover已让视口延伸至状态栏下方，此时100vh包含状态栏高度，设置min-height: 100vh能确保页面高度覆盖整个视口，避免滚动时内容截断。
• object-fit: cover保证图片按比例填充容器不变形，object-position: top确保状态栏区域显示图片的顶部部分，实现背景融合效果。

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