删掉 <meta name="viewport"> 是强制前提，否则响应式行为无法禁用；需同步覆盖 .container 所有断点 max-width、禁用导航栏折叠、统一使用 col-* 栅格类，并手动修复第三方组件兼容性问题。
删掉 <meta name="viewport"> 是前提，不是可选项
没有这一步，后面所有 CSS 覆盖都是白忙——移动端浏览器仍会触发媒体查询，.container 依然按断点收缩，col-md-6 依然在小屏变堆叠。它不是“辅助开关”，而是响应式行为的总闸门。删掉后，页面退化为桌面视口渲染（约 980px 宽），所有 @media (min-width: ...) 基本失效。
常见错误是只改 CSS 却保留 viewport 标签，结果在 iPhone 上 layout 看似正常，实则缩放错乱、点击区域偏移、字体忽大忽小。
.container 必须逐断点覆盖 max-width，不能只写 width
Bootstrap 5 的 .container 不靠单一 width 控制，而是用媒体查询组合设置不同断点下的 max-width（如 sm: 540px, md: 720px, lg: 960px…）。只写 width: 1200px 会被后续断点规则覆盖，小屏下仍会窄。
正确做法是用 !important 强制清空所有断点的 max-width：
.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; } }
@media (min-width: 1400px) { .container { max-width: 1200px !important; } }
或者更稳妥：用 Sass 重设 $container-max-widths 变量为统一值后重新编译。
导航栏折叠必须手动禁用，.navbar-collapse 不会自动消失
删了 viewport 后，.navbar 的折叠逻辑（JS + .collapse 类）依然存在。小屏下菜单默认收起，用户点开才显示——这不是你想要的“固定宽度布局”效果。
需显式移除折叠行为：
- 删掉
data-bs-toggle="collapse"和data-bs-target属性 - 给
.navbar-collapse加display: block !important - 确保
.navbar-nav内部使用.flex-row或flex-nowrap防止换行
否则即使容器宽度锁死，导航栏在窄屏仍表现为隐藏+点击展开，体验断裂。
栅格类别名要统一用 col-*，别混用 col-md-*
Bootstrap 5 中 col-*（无前缀）等价于旧版 col-xs-*，表示“所有断点都生效”。而 col-md-* 在删掉 viewport 后虽不报错，但其断点语义已失效，容易引发预期外的列宽计算（尤其配合自定义 gutter 或 flex 设置时）。
建议全部替换为 col-*，并检查是否需要额外加 flex-nowrap 或 min-width 防止内容挤压变形。
真正麻烦的是第三方组件（比如日期选择器、模态框）——它们内部可能依赖 viewport 或断点 JS 行为。删了 viewport 后，这些组件常出现定位偏移、遮罩层不全、滚动异常。这类问题没法靠 CSS 一劳永逸，得逐个 inspect + patch。
