给公司官网做了次全站体检，224 个页面的手机端问题和整改记录

前几天在手机上翻自家官网，看到两处别扭。有个栏目的表格，右边那一列在手机上根本看不到。还有些说明文字，字小得要凑近看。客户没提过，但我们自己看着不舒服。一页一页手动翻太慢，索性写个脚本，把 224 个页面全量扫一遍。

脚本是大模型帮着写的，逻辑不复杂。用无头浏览器打开每个页面，模拟 iPhone 的屏幕宽度（390 像素），在页面里跑一段 JS 量尺寸，一页出一份体检单。224 个页面跑完五分多钟。

一、判据比想象中重要

第一次跑，判据只有一条，整页有没有横向滚动条。结果 224 个页面全是 0，一个都没超标。

数据太干净，反倒说明判据定得不对。手机上看着难受，未必是整页能左右滑，更多时候是局部出了问题。后来把判据加到五条。

整页能不能左右滑。有没有元素跑出屏幕外，这一条要连被父容器裁掉的一起算。正文里有没有小于 12 像素的字。是不是三块以上并排、每块窄得放不下几个字。链接和按钮的可点区域有没有小于 28×26。

第二条最容易漏。有些元素超出屏幕后，被外面一层 overflow:hidden 的容器裁掉了，页面上连滚动条都不出现，看着一切正常，其实内容已经缺了一块。

二、改前改后

第三行最直观。原来 224 个页面每一页都有小于 12 像素的字，现在一页都没有了。最后一行还剩 98 处，都是 17 到 25 像素高的小链接，位置在正文和列表里，上下留白足够，再撑高就得动版面，先停在这里。

第二行剩下的 21 页也不是没修完。这些页面的越界元素，都在能左右滑的容器里，内容没丢。这批页面是按电脑版式做的，要真正改成手机上单列，等于整批重做，排在后面。

三、几个具体的毛病

富文本表格右边被裁，47 个页面。样式表里窄屏那一段还留着 min-width 520px。390 宽的屏幕塞一个 520 宽的表格，多出来的部分就被裁了。改成让表格在内部自己横向滚动，不再撑破页面。

套餐页整块 1000 像素宽，十几页。一开始以为是套餐那一块自己的问题，改了半天没反应。顺着父级往上找，真正定死宽度的是更外层的两个容器，一个 1000 像素，一个 1180 像素。子元素写 100% 也没用。改法是点名这两个容器，在窄屏下都改成 100%。

案例列表两个块硬并排，一共 1008 像素。左边图片 268，右边文字 740，窄屏下直接把右半边推出去。改成上下堆叠。

关于我们页有一行英文标题，占着 366×24 的位置，一个字都看不见。父级把字号设成了 0，子元素没重新设回来。这个是电脑上打开也一样，老站留下来的，顺手补了。

四、顺手扫了一遍广告法

体检跑完，顺手用另一个脚本把全站文案过了一遍，找广告法里那类绝对化用语。

脚本报出来 344 处。人工看了一遍，真正要改的是 18 处。

344 处里大部分是误报。像「第一步」「第一时间」「唯一凭证」「永久跳转」这些，是序数词和技术名词，不属于对效果的承诺，不用动。真正有问题的是「永不占线」「120% 满意」「超值价」「第一品牌」「最受欢迎」这类对效果打包票、或者排出同行的说法。

改法是把承诺改成描述。「永不占线」改成「随时接通」，「120% 满意」改成「满意」，「超值价」改成「优惠价」。

这类扫描一定要人工过一遍。344 处要是照单全改，会把正常的词也改坏。

五、字体也查了

顺手把字体过了一遍，结论是不涉及侵权。

网站没有嵌入任何商用中文字体。正文用的是「微软雅黑」，这是调用访客自己电脑里的字体，网站并没有分发字体文件。图标用的是阿里的 iconfont 字体库，免费可用。另外旧样式表里有两个 Adobe 商业字体的引用，路径是坏的、文件根本不存在，等于死代码，不会加载。

六、踩的两个坑

一个是改了样式不生效。样式表明明改好了，浏览器里就是不认。查了快半小时，最后发现是缓存。改样式文件必须同时把引用地址后面的版本号改掉，不然浏览器一直用旧的那一份，连无头浏览器的禁用缓存开关都绕不过去。

另一个是自己改错了一处。有个分类标签条，我看名字以为是方块网格，给它加了个宽度 50%，想让它排两列。改完实测发现变成一列一个、还居中，比原来更难看。原来那条标签本来就有正确的处理，自然宽度、按文字长短折行、整条居中。删掉我加的那行，恢复原样。

名字和注释都会骗人，得看实际渲染出来的尺寸。

七、还没弄完的

33 张本地图片文件丢了，26 个页面出现叉图，都是 2018 年的案例截图，得找原图，或者把引用去掉。另外那批需要左右滑才能看全的老页面，要改成手机单列，等于重做，排在后面。

体检脚本和报告留在我们内部。同行朋友如果也想给自己的网站做一次类似检查，可以电话里聊。