响应式设计实战：从移动端适配到性能优化的完整指南

移动端横屏时，我的响应式布局直接崩了

上周改一个老项目，本来只是加个新页面，结果在 iPhone 横屏模式下，整个布局直接糊成一团——导航栏挤到一半，图片溢出屏幕，按钮点都点不到。我一开始以为是媒体查询没写全，结果翻了半天 CSS，发现根本不是那回事。

折腾了半天才发现，问题出在 viewport 上。我原本的 viewport 设置是：

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

这在竖屏时完全没问题，但一横屏，iOS Safari（尤其是老版本）会把 device-width 当成物理像素宽度，而不是 CSS 逻辑像素。比如 iPhone 13 竖屏是 390px，横屏按理说应该还是 390px（因为 CSS 像素不变），但某些浏览器会把它当成 844px（物理分辨率），导致整个布局被拉宽，媒体查询全部失效。

我一开始试了各种媒体查询组合，比如：

@media (orientation: landscape) and (max-width: 768px) {
  /* 调整布局 */
}

但效果很不稳定，有些设备识别不到，有些又触发了两次。更坑的是，安卓和 iOS 行为还不一致，三星手机横屏时 device-width 正常，但 iOS 就抽风。

试了三种方案，最后选了最“土”的那个

第一种方案：用 JavaScript 动态设置 viewport 的 width。网上有人推荐这样干：

function setViewport() {
  const width = window.innerWidth;
  const viewport = document.querySelector('meta[name="viewport"]');
  viewport.setAttribute('content', width=${width}, initial-scale=1.0);
}
window.addEventListener('resize', setViewport);
setViewport();

听起来很聪明，但实际一跑就发现问题：页面加载时会先闪一下原始布局，然后再缩放，用户体验极差。而且频繁修改 viewport 会导致 iOS Safari 页面重排卡顿，尤其在低端机上。

第二种方案：放弃基于 device-width 的响应式，改用 min-width 固定断点 + 弹性盒子。比如所有容器都用 max-width: 100%，内部用 flex 自适应。这在理论上可行，但老项目里全是 float 和绝对定位，重构成本太高，老板只给我半天时间。

第三种方案（也是最终用的）：强制锁定 viewport 的缩放行为，并在 CSS 里用 min-width 防止内容溢出。核心思路是——不让 viewport 跟着横屏乱变，而是让内容自己缩进去。

核心代码就这几行

首先，把 viewport 改成禁止用户缩放，并固定初始缩放比例：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

注意这里加了 maximum-scale=1.0 和 user-scalable=no。虽然牺牲了用户缩放能力，但对大多数内容型页面影响不大，而且能彻底避免 iOS 横屏时 viewport 宽度漂移的问题。

然后，在全局 CSS 里加一条保险：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 关键！防止横向滚动条 */
  min-width: 100vw; /* 确保 body 至少占满视口 */
}

接着，所有可能溢出的容器（比如图片、表格、代码块）都要加：

.overflow-safe {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

特别是图片，必须显式设置：

img {
  max-width: 100%;
  height: auto;
  display: block;
}

最后，媒体查询还是得写，但只依赖 min-width，别用 orientation：

/* 手机竖屏 */
@media (max-width: 767px) {
  .container {
    padding: 16px;
  }
}

/* 平板/横屏手机 */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 720px;
    margin: 0 auto;
  }
}

这样改完之后，横屏时虽然屏幕变宽了，但内容不会溢出，布局依然保持紧凑。测试了几台 iOS 和安卓机，包括 iPhone SE（老机型）和三星 A52，表现基本一致。

踩坑提醒：这三点一定注意

第一，overflow-x: hidden 必须加在 body 上，不能只加在某个容器。否则 iOS Safari 会在横屏时偷偷加一个横向滚动条，哪怕你内容没超——这是它处理 viewport 的怪癖。

第二，别信网上那些“完美适配横竖屏”的 JS 方案。很多都是基于 window.orientation，但这个 API 在 iOS 13+ 已被废弃，而且安卓实现混乱，兼容性极差。能用 CSS 解决就别碰 JS。

第三，如果你用了第三方 UI 库（比如 Ant Design Mobile），检查它有没有硬编码的固定宽度。我就遇到过一个组件内部写了 width: 375px，横屏时直接撑爆。最后只能用 CSS 覆盖：

.ant-some-component {
  width: 100% !important;
  max-width: 100%;
}

（是的，用了 !important，我知道不优雅，但赶工时管不了那么多了）

还留了个小尾巴，但无大碍

目前唯一的小问题是：在极少数安卓机（比如华为老款）上，横屏后地址栏收起时，100vh 会包含地址栏高度，导致底部内容被遮挡。不过我们页面没有全屏 hero 区，所以影响不大。如果真要解决，可以用 JS 动态计算 innerHeight 并赋给 CSS 变量，但我觉得为了 1% 的设备加一堆 JS 不值得。

以上是我踩坑后的总结，如果你有更好的方案欢迎评论区交流。比如有没有人用 CSS Container Queries 解决过类似问题？或者对 viewport 有更优雅的控制方式？