移动端视口meta标签导致单页网站section的vh/svh失效求助

核心问题分析 #

1. 错误的Viewport设置：height=device-height是非标准属性，会导致移动端视口高度计算异常——浏览器的动态工具栏（地址栏/底部导航）会改变视口高度，进而让100vh/svh的计算值偏离预期，出现section拉伸或无法占满视口的情况。
2. Grid容器高度未明确：body使用display: grid但未设置最小高度，容器高度默认由内容撑开，导致section的高度计算失去参照。
3. 粘性导航栏的空间占用：导航栏固定在视口顶部，未从section的高度中扣除其占用空间，导致视觉上section无法填满剩余视口。

分步解决 #

1. 修复Viewport Meta标签

替换错误的viewport设置为移动端适配标准写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width让浏览器将视口宽度匹配设备宽度，initial-scale=1.0确保初始缩放比例正确，这是移动端网页适配的基础配置。

2. 确保Body容器占满视口高度

为body添加最小高度，让Grid容器以视口高度为基础布局：

body {
  position: relative;
  display: grid;
  font-family: sans-serif;
  margin: 0 auto;
  padding: 0 1em;
  max-width: 80rem;
  box-shadow: 0 0.5em 1em 0.1em rgba(0, 0, 255, 0.1);
  min-height: 100svh; /* 确保容器至少覆盖视口高度 */
}

3. 调整Section高度，扣除导航栏空间

假设你的粘性导航栏类名为.sticky-nav，先明确其固定高度，再用calc计算section的可用高度：

/* 配置粘性导航栏 */
.sticky-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 60px; /* 替换为你导航栏的实际高度 */
  background-color: #ffffff; /* 避免透明背景遮挡section内容 */
}

/* 计算section高度 */
section {
  height: calc(100svh - 60px); /* 减去导航栏高度 */
}

如果导航栏高度不固定，也可以给section添加margin-top: 60px（对应导航栏高度），同时保持height: 100svh，但calc的方式更精准，能让section完全填满剩余视口空间。

4. 兼容性降级（可选）

如果需要兼容不支持svh的旧浏览器，可添加多属性 fallback：

section {
  height: 100vh;
  height: 100dvh;
  height: 100svh;
}

• vh：传统视口高度（部分浏览器取工具栏隐藏时的高度）
• dvh：动态视口高度（随工具栏显示/隐藏实时调整）
• svh：最小视口高度（取工具栏显示时的视口高度）

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