必须删除标签，否则Bootstrap 5媒体查询失效，导致移动端布局崩溃；需同步覆盖所有断点的.container max-width、重置栅格间距、处理JS组件响应逻辑。
删掉
不删这行，后面所有 CSS 覆盖都白做。Bootstrap 5 的媒体查询（如 @media (min-width: 992px)）依赖 viewport 标签触发；没它，浏览器在手机上会以约 980px 桌面视口渲染，导致文字极小、点击错位、横向滚动——这不是“禁用响应式”，是布局崩溃。
检查 ，包括 CMS 或模板自动生成的部分。删掉后，在手机上刷新页面，确认地址栏不再缩放、页面不再自动调整比例。
- 常见错误：只改 CSS 却保留 viewport，结果小屏下导航栏仍折叠、轮播图居中不铺满
- 注意：某些框架（如 Django-Bootstrap）会自动注入该标签，需查模板源码
- 删掉后，
col-md-6这类断点类将完全失效，因为对应媒体查询不执行
覆盖 .container 所有断点的 max-width，不能只写一条
Bootstrap 5 的 .container 在每个断点（xs、sm、md、lg、xl、xxl）下都有独立 max-width 声明。只写 .container { max-width: 1200px !important } 会被后续媒体查询里的规则覆盖，小屏下依然收缩。
必须显式覆盖全部断点，或用 @media (min-width: 0) 统一捕获：
.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; }
}
- 自定义 CSS 文件必须放在
bootstrap.min.css之后引入，否则优先级不够 - 用 Sass 重设
$container-max-widths变量为(xs: 1200px, sm: 1200px, ...)更干净，但需重新编译 - 别用
width: 1200px替代max-width，否则在超宽屏下内容不会居中
栅格和间距必须手动重置，col-* 不等于“无响应”
col-6 看似简单，但它只是默认断点类，底层仍依赖 .row 的负边距和 .col 的内边距。删了 viewport 后，这些值不会自动归零，列之间仍有 30px 间隙，且可能因父容器宽度不足而换行。
必须显式清空：
.row {
margin: 0;
}
.col {
padding: 0;
}
.navbar-nav {
flex-wrap: nowrap;
}
- 导航栏默认仍带
.navbar-collapse折叠逻辑，需移除data-bs-toggle="collapse"并加.navbar-collapse { display: block !important; } - 避免混用
col-md-6和col-6，前者在无 viewport 下样式丢失，后者才始终生效 -
.container-fluid也不可靠——它虽是width: 100%，但仍受 viewport 缺失影响，导致移动端渲染异常
JS 组件行为不会自动消失，得单独处理
删 viewport 不影响 Bootstrap JS 的运行逻辑。Dropdown、Modal、Offcanvas 内部常读取 window.innerWidth 或监听 resize，小屏下仍可能意外隐藏、错位或遮罩层不全。
典型问题与应对：
-
Modal背景遮罩层高度不足：加.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } -
Offcanvas默认只在md下触发：删掉data-bs-breakpoint属性，或直接不用它，改用Modal - 第三方组件（如日期选择器）内部有响应式判断：检查其文档，找
disableResponsive类似配置，或强制加style="width: 100% !important"
真正难啃的是那些你没意识到它有响应式逻辑的组件——比如一个轮播图插件，可能在 window.innerWidth 时自动关闭自动播放，删 viewport 后它却还在跑这个判断，结果行为错乱。这类问题只能逐个排查，没有银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
