移动端/平板横竖屏切换时网站两侧出现空白问题求助

问题描述 #

在最大宽度540px的移动端场景下，竖屏时网站显示正常，但切换为横屏后，网站两侧出现空白（见下方截图）。尝试通过媒体查询给父容器.wrapper设置margin:0，但未解决问题。

竖屏显示：

横屏显示：

当前使用的CSS代码：

* {
  box-sizing: border-box;
}

html{
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper{ /* My parent container */
  width: 100%;
  height: 100%;
  overflow: hidden;
}

@media (orientation: landscape) {
  .wrapper {
    margin: 0;
  }
}

可能的原因及修复方案 #

1. 视口设置缺失或错误 #

移动端网页必须通过视口标签绑定屏幕宽度，否则横屏时浏览器会保留竖屏阶段的视口尺寸，直接导致两侧空白。检查HTML头部的<meta>标签，确保视口设置正确：

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

• width=device-width：让视口宽度完全匹配设备屏幕宽度
• initial-scale=1.0：初始缩放比例设为1，避免默认缩放导致的尺寸偏差

2. HTML/BODY未明确占满宽度 #

虽然你给html和body清除了margin、padding，但未设置宽度为100%，横屏时无法自动撑满整个屏幕。修改CSS：

html{
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100vw; /* 强制宽度至少等于视口宽度 */
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-width: 100vw;
}

3. .wrapper宽度设置逻辑问题 #

width:100%是基于父元素宽度继承的，若父元素（body/html）宽度未正确占满视口，.wrapper也无法撑满。改用min-width:100vw替代width:100%，确保容器宽度始终匹配视口：

.wrapper{
  min-width: 100vw; /* 替换原width:100% */
  height: 100%;
  overflow: hidden;
}

4. 子元素固定宽度导致溢出 #

如果页面内存在固定宽度的子元素（比如硬编码width:540px），横屏时视口宽度超过540px，就会导致.wrapper无法占满整个屏幕。给所有子元素添加自适应限制：

.wrapper * {
  max-width: 100%; /* 强制子元素宽度不超出容器 */
}

5. 简化媒体查询逻辑 #

原媒体查询中设置margin:0属于无效操作（默认已经是0），可以针对横屏场景做精准适配：

@media (max-width: 540px) and (orientation: landscape) {
  html, body, .wrapper {
    min-width: 100vw;
  }
}

总结 #

优先检查视口标签是否正确，再确保html、body、.wrapper的宽度设置为100%或100vw，最后排查子元素是否存在固定宽度导致的溢出。按上述步骤调整后，横屏时的空白问题即可解决。

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