<meta name="viewport">标签移动端失效，Bootstrap适配异常求助

首先，我注意到你添加的<meta name="viewport">标签有个语法错误，这很可能是导致适配失效的关键原因：

<meta name="viewport" content="width=device-width, initial-scale=1;"/>

你在initial-scale=1后面用了分号;，而正确的语法应该用逗号,分隔属性值——浏览器无法解析带分号的viewport规则，所以这个标签相当于没起作用。先把它改成标准写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

改完之后如果问题还存在，可以按下面的步骤逐一排查：

• 检查Bootstrap CSS的加载顺序：确保Bootstrap的样式表在你的自定义CSS之前引入，否则自定义样式可能会覆盖Bootstrap的响应式布局规则。
• 排查固定宽度元素：有没有给容器、行或者列设置了固定宽度（比如width: 960px）？Bootstrap的响应式布局依赖于百分比宽度，固定宽度会在移动端撑破视口。
• 检查响应式类的使用：确认你用了Bootstrap提供的响应式类，比如col-sm-*、col-md-*来适配不同屏幕，或者用d-none d-md-block这类类来控制元素在不同设备的显示状态。
• 排查自定义CSS的冲突：有没有写过!important强行覆盖Bootstrap的样式？或者全局修改了box-sizing属性？Bootstrap默认使用box-sizing: border-box，如果改成content-box会导致布局计算错误。
• 用浏览器调试工具分析：打开Chrome/Firefox的开发者工具（F12），切换到设备模拟器模式，查看元素的盒模型、宽度、边距，看看有没有元素超出视口，或者有没有CSS规则被意外覆盖。

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