同一台站，两个屏幕。
电脑上打开，宽宽一趟，左图右文，导航一排六个字，页脚电话号码整整齐齐。看着挺像回事。
拿手机打开，第一屏塞进来的东西和电脑上一模一样，只是缩小了。招牌字被压成一行小蚂蚁，导航挤成两个半字加一个省略号，图片压扁，正文第一行只有七个字，后面全在屏幕外面。
这个差别，多数老板自己没见过。签合同那天看的是电脑，验收那天看的还是电脑，往后一年也不会用手机打开自己的站。
那个点不动的地方
一个做门窗的站，去年冬天换的。
站做完了，在电脑上打开，宽宽一趟，看着挺像回事。直到有人拿手机点开，左手捏着放大，拇指划了四下，屏幕才挪到电话号码那一行。
那个号码点不动。它不是能点的链接，得长按、复制、再打开拨号。
再往上翻，想找服务范围。翻回来又翻过去，来回三趟，才在页面最右边一条窄缝里找到。
当时那句原话是：我都找不到我自己要的东西。
后来拿手机重新看了一遍才发现，那个电话号码在手机上只露出一半，右边半个数字被一横条广告位压着。这笔站做完半年，付款也付了，只是没人在手机上验过这一页。
客户不会告诉他这个。客户手指一滑就走了，连一句“你这网页打不开”都懒得说。
一个屏幕和两个屏幕，是两套排法
这件事的根子不在“做得糙”，在于多数网站是按一个屏幕设计的，客户却常年在另一个屏幕上打开它。
网页内容排版的国际规范 WCAG 2.2 里有一条，编号 1.4.10，管的就是这件事。原文的要求是，内容展示出来不能丢信息、不能丢功能，也不能要求人在两个方向上滚动：竖直排列的内容，在相当于 320 CSS 像素的宽度下不能被要求横向滚动，横向排列的内容在相当于 256 CSS 像素的高度下同理；需要两个方向才能看懂的部分除外，比如地图、图、视频、游戏、演示、数据表格。
那条注里还写了一句更值得记住的：320 CSS 像素，相当于 1280 像素宽的屏幕放大到 400%；256 CSS 像素，相当于 1024 像素高的屏幕放大到 400%。
这份文件是 W3C 发布的国际技术标准，不是国内法规，没有强制力，也不考核你的网站。但它把一件事说清楚了：屏幕窄到一定程度，内容得顺着一个方向排下去，别让人左右横着拉。它管的是“放大之后还读不读得下去”，不是“手机好不好看”。
那 320 是个什么概念？现在一部常见手机的屏幕宽度，CSS 像素都超过 320 一截。但这条线管的不是“手机能不能看”，而是“再窄下去还排不排得开”：屏幕放大到 400%、浏览器窗口拖到只剩三分之一、分屏开着半边，都会落到这个宽度上。手机只是最常见的那一种情形。
重排这件事本身不神秘，是网站里的一段样式规则在管：屏幕窄的时候，两栏变一栏，图片宽度跟着屏走，字号不缩到看不清，电话号码和微信变成能点的。
做成这样就够了。反过来，如果一个站把内容都写死在宽度里，只是让页面整体缩小去适配手机，那么客户看到的就是上面那样：什么都在，什么都点不动，还得横着拉。
分三段做，从今晚就能开始的这一段
这一段，今晚，用你自己的手机把主要页面走一遍。
找一页，先不看内容，只看四件事。
字能不能直接看清，要不要捏着放大。页面是不是只用上下滚：判断很简单，手指在屏幕上往回拨，如果整页跟着左右动了，那就是有东西超出屏幕宽度了。电话号码点一下，会不会跳出拨号。导航那六七个入口，是一眼能看全，还是被压成两个半字加一个省略号。
四个问题里有一个不对，就记一条。整站走三到五页：首页、产品或者服务那一页、联系方式那一页。遇到问题顺手截屏，截屏比描述管用，发给建站的人时，对方知道你说的是哪一块。
时间二十分钟，不花钱。还有个更狠的验法，电脑上把浏览器窗口拖到最窄，或者按住 Ctrl 滚轮放大到 400%，页面如果开始让你左右拉，那根子就在排法上。
本月，拿截屏去找建站的人，只提两件事。
一件是让他改，把排法合到手机宽度上：一栏排、字号别缩、图片跟着屏走、电话变成能点的。另一件更关键，把“手机打开验证”写进他交付之前必须做的一步，并且要他给你截图。
如果这个站是你找人做的、合同里没写手机端，那就在微信里留一句话：这几处改了之后，我用手机自己验一遍。这句话不算难为对方，也不算返工，是验收本来就该有的一道。往期那篇讲建站之前先想清楚什么，可以对照着看：我劝过 20 个老板别急着上系统，先让客户落到“店”名下。
三个月，把这条验法变成习惯。
每次改完内容、上完新图、换完活动页，都拿手机看一眼首页第一屏。它跟 SEO 不是同一件事：SEO 管的是别人能不能搜到你，手机端管的是他点进来之后那三秒钟里留不留得住。这件事我在另一篇里拆过：内容不是让你当网红，是让人搜到你。两个一起做，搜得到之后才有人留下。
至于要不要为此换一个站、重新花一笔钱，先别急。多数问题出在排法上，不在地基上。
说句实在的
手机端这件事最麻烦的地方在于：做得好和做不好，交付那天看上去差不多，都是“这个网站做完了”。
真正的差别，只有客户那三秒能看出来。
所以倒过来问一句：你的网站，你现在拿手机打开，电话号码点得动吗？
📎 主要依据
W3C《Web 内容无障碍指南（WCAG）2.2》（W3C Recommendation，2023 年 10 月 5 日发布）准则 1.4.10 Reflow（AA 级）：320 CSS 像素宽、256 CSS 像素高下不出现二维滚动且不丢失信息或功能 —— W3C · 准则 1.4.10 说明原文
标准正文：准则 1.4.10 Reflow —— WCAG 2.2 正式推荐标准原文
该标准为 W3C 发布的国际技术标准，非国内法规，无强制力、不纳入国内考核；上述条文原文核对后摘意，非逐字全引。
