<p>删掉 viewport 标签不能禁用响应式，反而导致移动端以 980px 桌面视口渲染，引发文字过小、点击错位；必须同步切断媒体查询、重置 container 宽度、改用 col-xs-* 栅格、清零 row/col 间距，并处理 JS 组件对视口的依赖。</p>
删掉 <meta name="viewport"> 标签只是起点，不是终点
很多人删了 <meta name="viewport" content="width=device-width, initial-scale=1"> 就以为响应式关掉了，结果手机上文字小得看不清、按钮点不准、页面横向滚动——这不是 bug，是浏览器在用约 980px 的“桌面视口”强行渲染你的页面。它没关响应式，只是让所有媒体查询（比如 @media (min-width: 768px)）失去触发条件，导致布局逻辑错乱。真正要动的是 CSS 层级的断点依赖链。
必须覆盖所有断点下的 .container 宽度
Bootstrap 的 .container 在不同断点（sm、md、lg、xl）下有独立的 max-width 声明。只写一条 .container { max-width: 1200px !important } 没用，它会被后续媒体查询里的样式盖掉。
- 正确做法是用
!important显式覆盖每个断点，或统一用@media (min-width: 0)捕获全部 - 自定义 CSS 必须放在
bootstrap.min.css之后引入，否则白写 - 更稳妥的写法：
.container { max-width: 1200px !important; } @media (min-width: 0) { .container { max-width: 1200px !important; } } @media (min-width: 576px) { .container { max-width: 1200px !important; } } @media (min-width: 768px) { .container { max-width: 1200px !important; } } @media (min-width: 992px) { .container { max-width: 1200px !important; } } @media (min-width: 1200px) { .container { max-width: 1200px !important; } }
栅格类名必须切到 col-xs-*（Bootstrap 4/5 中即 col-*）
删掉 viewport 后，col-md-6 这类类名的样式只在对应媒体查询里定义，而那些查询已失效。继续用它们，列宽会塌缩成 100% 或直接不渲染。
- 全部改用
col-xs-*（v3）或col-*（v4/v5），它们是默认断点，不依赖媒体查询 -
.row默认有margin-left: -15px，.col有padding-left: 15px，需手动清零：.row { margin: 0; } .col { padding: 0; } - 如果用了
.container-fluid，它虽是width: 100%，但仍受 viewport 缺失影响，建议仍走.container+ 强制宽度路线
别忘了 JS 组件和第三方库的副作用
很多 Bootstrap JS 组件（如 modal、dropdown、carousel）内部会读取 window.innerWidth 或监听 resize，viewport 缺失后它们可能误判屏幕尺寸，导致遮罩层错位、下拉菜单弹不出、轮播图高度异常。
立即学习“前端免费学习笔记（深入）”；
- 检查是否用了
data-bs-toggle="modal"类组件，测试其在小屏下的定位和尺寸 - 日期选择器、富文本编辑器等第三方 UI 库常自带响应式逻辑，删 viewport 后需单独验证
- iOS Safari 即使没 viewport，也可能因内容超宽触发强制缩放，建议加兜底：
html { font-size: 16px; } img, video, table { max-width: 100%; height: auto; }
