淦！又特么是这个问题，我现在看到这种左右出滚动条的页面就PTSD，凌晨三点被测试同事的电话叫醒说移动端炸了，打开一看网页比我家客厅的电视还宽，当时血压就上来了。这破玩意儿比算法更新还让人头疼，因为它是立竿见影的丑和难用，用户点进来一秒就关，你内容再好、SEO再牛也白搭，直接劝退。
这种破事十有八九是自己挖的坑。
你是不是也手贱去改了什么全局CSS，比如给某个父元素设了个死宽的 `width: 1200px;` 还加了 `!important`？或者更蠢的是，引入了某个陈年的jQuery插件，它自带一套能撑爆银河系的样式表？我上次就栽在这上面，盯着Chrome开发者工具里的计算样式看了半小时，最后发现是一张产品图没处理，原始宽度4000像素直接怼上来了，把整个容器都撑变形了，妈的。 真绝了。
赶紧的，按这个顺序排查，能救一个是一个：
1. 看看你的 `` 里，`` 这行祖宗代码还在不在！ 必须是：``。没有它，手机浏览器就会自作聪明地把你的网页当成桌面版来渲染，然后拼命缩放，结果就是页面元素错位、排版稀碎。别问我怎么知道的，我抽了三根烟才想起是上次“优化”代码时不小心给它注释掉了。
2. 检查有没有“宽度暴君”。 在CSS里全局搜 `width:` 和 `min-width:`，特别是那些值特别大的，或者针对body、html、主要容器元素的。试试把它们改成 `max-width: 100%;` 或者用 `width: 100%;`。容器要学会谦让，别跟屏幕杠。
3. 图片、视频、表格这些“刺头”。 给所有媒体元素加上这条保命CSS：img, video, iframe, table { max-width: 100%; height: auto; }。尤其是表格，在手机上横向滚动展示是优雅的，但被挤成一坨屎就是灾难，可以考虑用响应式表格插件，或者简单点，在移动端直接让表格内部滚动。
4. 绝对定位和固定定位的“孤儿”。 有些元素用了 `position: absolute/fixed;` 并且设了很大的 `left` 值，它可就真飘到屏幕外面去了。检查一下它们的定位基准和坐标。
记住，现在做站，不从移动端开始考虑布局就是找死。Google都移动优先索引了，你网页在手机上显示不全，排名和流量就别想了，直接进“用户体验地狱”。写完代码，多用不同尺寸的手机和浏览器开发者工具的响应式模式看看，别等上线了再哭。妈的，都是血泪教训。
