如何修改Bootstrap适配手机屏幕？响应式应用手机端显示异常求助

嘿，我来帮你捋捋这个问题——这类手机端自适应失效的情况我碰到过不少，大概率是几个容易忽略的小细节出了问题，咱们逐一排查：

• 忘记添加视口（Viewport）元标签：这绝对是手机端自适应的核心前提！如果你的HTML<head>里没加这个标签，手机浏览器会默认把页面当成桌面端页面缩放显示，根本不会自适应设备宽度。正确的标签应该是这样的，赶紧加到<head>里：

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

  它的作用是告诉手机浏览器：“用当前设备的屏幕宽度作为页面宽度，初始缩放比例设为1”，没有这个，响应式基本等于白搭。

• CSS媒体查询出了问题：检查下你的媒体查询语法是否正确，比如断点值是不是写错了（比如@media (max-width: 768px)这类写法有没有出错），或者媒体查询里的样式是不是被更高优先级的样式覆盖了——比如有些全局样式加了!important，直接把媒体查询里的自适应样式冲掉了。

• 存在固定宽度的“顽固”元素：如果页面里有元素硬写了固定宽度（比如width: 1200px），当手机屏幕宽度小于这个值时，页面就会横向溢出或者出现滚动条，直接破坏自适应效果。把这类元素改成相对宽度，比如width: 100%，或者在对应断点的媒体查询里重新设置宽度。

• 图片没做响应式处理：图片如果没加max-width: 100%; height: auto;的样式，在小屏幕上很容易超出容器，把页面撑宽。给所有图片加上这个样式，让它们能自适应容器的宽度。

• 手机浏览器缓存搞鬼：有时候手机端会缓存旧的页面资源，导致你刚改的响应式代码没生效。试试清除手机浏览器的缓存，或者给CSS/JS文件加个版本号（比如style.css?v=1.1），强制浏览器加载新资源。

你可以先从检查视口标签开始，这是最常见的问题。如果已经加了，再挨个排查上面的其他点，应该能找到问题所在。

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