HTML新手开发的网页引入Bootstrap后移动端无响应，求排查帮助

最高发基础问题：遗漏移动端视口配置 #

这是90%以上初学者会踩的坑——网页默认会按照980px的桌面视口宽度在移动端渲染，再通过整体缩放塞进手机屏幕，所有预先写好的媒体查询规则完全不会触发，自然达不到适配效果。
需要在HTML的<head>标签内补充标准视口声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

注意：这条标签必须放在所有CSS引入标签之前，不然会被浏览器的默认渲染逻辑覆盖。

布局规则问题：写死固定尺寸，无弹性适配空间 #

很多人照搬桌面端的固定宽度写法，没考虑窄屏的尺寸适配，哪怕补了视口标签，元素也会直接撑破移动端视口，出现横向滚动、布局错位：

• 不要给主容器写死固定的像素宽度（比如width: 1200px），替换为弹性规则：width: 100%; max-width: 1200px; margin: 0 auto; 既保证超宽屏下内容不会过度拉伸，又能在小屏自动撑满可用宽度
• 给所有媒体类元素加通用防溢出规则：img, video, iframe { max-width: 100%; height: auto; } 避免大尺寸原图直接撑破父容器
• 弹性布局（flex/grid）下不要给子元素写死过小的min-width，不然在320px这类窄屏下，子元素会直接把容器挤变形

逻辑错误问题：媒体查询规则写法不当 #

• 优先采用移动优先的写法：先编写适配最小屏的基础样式，再通过@media (min-width: 断点值)的规则叠加平板、桌面端的样式，避免把移动端适配的规则写在大宽度的媒体查询块里，导致小屏加载不到
• 检查媒体查询的语法正确性：很多人写断点时漏了长度单位（比如写成(max-width: 768)没加px），这类错误会让浏览器直接忽略整条媒体查询规则
• 检查CSS引入顺序：如果把响应式样式文件放在主桌面样式文件的前面，后面同优先级的固定桌面样式会直接把响应式规则覆盖掉

快速排查步骤 #

• 打开浏览器开发者工具，切换到设备模拟模式，观察页面状态：如果是整体等比缩小的效果，直接补全视口meta标签即可
• 查看页面横向溢出的元素：在元素面板逐一定位超过视口宽度的元素，修改对应的固定宽度规则
• 核对媒体查询生效状态：在开发者工具的样式面板，检查对应视口宽度下，预设的适配规则有没有被其他高优先级样式覆盖

内容的提问来源于stack exchange，提问作者Usama Altaf