官网手机端样式乱了，几个实在的排查和修复办法

很多小公司做个官网，电脑版挺漂亮，同事的手机打开一看，banner 撑出屏幕、文字挤在一起、二维码看不清。这种事 80% 不是模板本身的问题，是某一步漏配了或者某段 CSS 没照顾到。按下面这套顺序查，半小时内能定位。

一、先看 viewport 标签有没有配

在 HTML 的 `<head>` 里得有这一行：

```html

```

没这一行，手机浏览器默认按 980px 宽渲染，再自动缩放字小到看不清，图片也糊。不少用模板改文字的人，因为没动过头部，模板默认就有这一行；但一旦自己加某些第三方 JS 工具或 CMS 编辑模板时不小心删了，就出大问题。

判断方法：浏览器开开发者工具（F12）切到手机模式（iPhone/Pixel 任选），看看原网页元素宽度是撑出去的（980 宽）还是跟视口对齐。是 980 宽的话，多半就是这个标签缺失。

二、CSS 里写死的宽度是元凶之一

比如 `.banner { width: 1200px; }` 或者某个表格 `<td width="800">`，在手机上会被强行拉宽到超过屏幕，横着出现滚动条。模板化模板通常没这毛病，但用户自行加的轮播图、表格、第三方组件容易踩。

修法：把固定 `width` 改成 `max-width: 100%`，或者外层加 `overflow-x: auto` 让它出滚动条而不是撑爆整体页面。这种修复不用动结构，改一行 CSS 就完事。

三、断点没覆盖你的屏幕宽度

现在主流模板的断点一般是 768px（平板）、992px（小平板）、1200px（桌面）。如果有人加了自定义样式只针对"大屏"，在 800-1000px 之间（小平板横屏）就会出现样式断层。

排查方法：浏览器开发者工具拖动窗口宽度从 320 到 1440 慢慢扫一遍，看哪个宽度临界点样式突变；找到具体的 CSS 类，把对应的媒体查询 `@media (max-width: ...)` 范围扩一下就行。这是一段 5 行 CSS 的事。

四、图片没设自适应

老毛病：`<img src="...">` 没加 `style="max-width:100%"` 或者 CSS 里没 `.img-fluid { max-width: 100%; height: auto; }` 这种规则。直接放上去，手机端就把屏幕撑开。

如果用的是 `<div style="background-image: ...">` 当 banner，固定了高度 600px，到手机上不变会变短但不会按比例缩——这时候需要按视口宽度算高度，常用的是 `aspect-ratio` 或者 `padding-bottom: 56.25%` 这种比例盒。模板市场里规范的模板都处理好了，但用户编辑过的版本容易把这层改坏。

五、文字换行断词

长 URL、长英文、产品型号在一行末尾，到手机端就会溢出或者把间距撑大。解决办法是给对应容器加 `overflow-wrap: break-word; word-break: break-word;`（注：看情况用，跟中文混排要测一下）。这是非常小的 CSS 改动，但能解决"长英文串撑爆"的常见问题。

六、固定底部按钮挡住内容

很多模板加了"立即咨询"或回顶按钮，position: fixed 在右下角。如果没给它空出底部边距，正文最后一段就会被挡。

修法：给 body 加 `padding-bottom: 60px`（按钮高度 + 一点空隙），或者关键内容区底部加一个等高的占位 `<div>`。简单粗暴但管用。

七、调试时的小习惯

Chrome DevTools 的设备模式可以拖动视口慢慢扫，比固定几台真机方便。
关键的样式改完，在 iPhone Safari 和安卓自带浏览器各测一遍——它们对 vh/vmin 等单位的支持有些细节差异。
二维码清晰度问题多数是 PNG 太小，到手机上显示模糊；用 SVG 二维码最清晰。
表格多的话，加 `<table style="display:block;overflow-x:auto">`，让横屏手机能横向滚而不撑爆。

---

移动端样式问题一大半是 viewport + 固定宽没改 + 自适应图这三件事。改一次，网站在所有尺寸都能看，成本远低于重新做一个站。