viewport标签缺失或错误是Bootstrap响应式断点失效的最根本原因，因其控制浏览器对视口宽度的理解，缺失时移动端会以约980px桌面宽度渲染，导致断点媒体查询虽匹配却无法适配真实设备尺寸。
是的，viewport 标签缺失或写错，是 Bootstrap 响应式断点“无效”最常见、也最根本的原因。
为什么删了 viewport 就等于关掉所有断点
Bootstrap 的 col-sm-6、container 断点宽度、navbar-expand-md 这些类，全靠 CSS 里的 @media (min-width: 768px) 这类规则生效。而浏览器是否执行这些媒体查询，取决于它怎么理解“当前视口宽度”——这个理解权，完全由 <meta name="viewport"> 控制。
没这行标签，移动端浏览器（尤其是 Safari 和 Chrome for Android）会默认以约 980px 的桌面视口渲染页面。此时 window.innerWidth 返回 980，@media (min-width: 768px) 虽然匹配了，但实际设备宽度（比如 375px）被完全忽略，导致：
-
col-sm-6在手机上仍按 980px 计算，结果占满整行（等效于col-12） -
navbar-expand-md永远不触发折叠，汉堡菜单压根不出现 -
.container在小屏下依然用max-width: 720px，看起来窄得离谱
检查 viewport 是否真的正确
别只看有没有，重点看三处细节：
- 必须放在
<head>里，不能在<body>中 - 拼写不能错：
name="viewport"，不是viewpoint或view-port - content 值必须完整：
content="width=device-width, initial-scale=1"；删掉maximum-scale=1或user-scalable=no，它们在 iOS 16+ 已失效，还可能触发兼容模式 - 确认没有重复声明：CMS、脚手架或模板引擎（如 Django-Bootstrap、Flask-Bootstrap）常自动注入，容易漏查
为什么写了 viewport 还像“没生效”
现象：标签写了，DevTools 切换 iPhone 模拟器，左上角显示 390px，但 col-md-6 依旧堆叠 —— 这不是断点失效，是预期错误。
-
col-md-6只在min-width: 768px时生效；390px 远小于该值，它本就不该分两列 - 必须搭配更小断点类，比如
col-6 col-md-6，否则小屏退化为默认（col-12行为） - Bootstrap 4/5 的
sm断点起始是 576px，不是 768px；写col-sm-6却在 400px 设备上看不见效果，很正常 - 检查是否误用了旧版类名（如 Bootstrap 3 的
col-xs-6在 v5 中已移除）
真机调试时最容易忽略的一点
在 iPhone 或安卓真机上打开页面，如果地址栏还在缩放、页面需要双指放大才能看清文字、左右可横向滚动 —— 这几乎 100% 是 viewport 标签没起作用，而不是 CSS 写错了。
此时不要急着改 .container 宽度或重写媒体查询，先抓包或查看页面源码，确认那行 <meta name="viewport"> 确实存在、位置正确、拼写无误、且没被 JS 动态删掉。
