页面在桌面端正常，不代表在平板与手机上可用。这份文档按桌面、平板、移动端三类设备给出逐项检查清单，每类设备都有明确的视口尺寸、检查点与判定标准。

一、适用范围

• 适用：站点改版后、新增页面后的多端验收；断点调整与栅格变更后的复核；用户反馈“手机上排版错乱”时的定位。
• 不适用：浏览器兼容性测试中涉及旧版内核的场景；性能指标的采集与解读，见《页面加载性能检测步骤》；纯视觉设计评审。

二、准备工作

项目	要求	检查方法
测试地址	使用线上地址 https://example.com/，不用本地文件	curl -sSI https://example.com/
视口清单	桌面 1440×900、平板 768×1024、移动 390×844	在开发者工具中逐个切换
页面清单	首页、列表页、详情页、含表格的页面各一	写成勾选表
断点定义	已确认站点使用的断点值	在样式文件中搜索 @media
工具	浏览器设备模拟、npx lighthouse 可用	打开开发者工具确认可切换设备

• 三类设备分开记录结论，不要用一端的正常推断另一端。
• 检查前清空缓存或使用无痕窗口，避免旧样式干扰判断。

三、操作步骤

本节拆成三个子步骤，建议按顺序执行；每一步完成后先确认结果，再进入下一步。

3.1 桌面端检查

在 1440 宽度下确认布局完整、悬停态可用、导航层级清晰，并记录基线截图。桌面端同样要检查 1280 宽度，笔记本的实际可用宽度常常小于 1440。详见 3.1 桌面端检查。

3.2 平板端检查

在 768 与 1024 两个宽度下确认栅格切换正常、表格可横向滚动、触控目标尺寸足够。平板是最容易被忽略的一档，断点只覆盖手机与桌面时，竖屏平板会出现两套样式都不生效的区间。详见 3.2 平板端检查。

3.3 移动端检查

在 390 宽度下确认无横向滚动、字号可读、菜单可展开收起，并核对首屏内容与加载表现。移动端判断以真实视口宽度为准，机型名称不能作为依据，同一机型在不同浏览器下的视口并不相同。详见 3.3 移动端检查。

三端检查共用同一份页面清单，结论分开记录。任何一端发现问题，修复后都要把三端重新过一遍，只复测出问题的那一端，很容易漏掉被同一处样式影响的另一端。

四、验证方法

1. 执行 curl -sS https://example.com/ | grep -o '<meta name="viewport"[^>]*>'，预期包含 width=device-width 与 initial-scale=1；缺少 viewport 时移动端会按桌面宽度渲染，后续检查全部失效。
2. 在移动视口下检查 document.documentElement.scrollWidth <= window.innerWidth，预期结果为 true；为 false 时用元素遍历找出具体超宽节点，不要用 overflow-x: hidden 掩盖。
3. 用 npx lighthouse https://example.com/ --preset=mobile 采集，预期无“内容宽于视口”类审计项，触控目标尺寸审计得分为 1。
4. 逐页点击主导航与页脚链接，预期在三种视口下均可达且不遮挡正文；菜单展开后背景应锁定滚动，收起后页面位置不跳变。

五、常见问题

现象	可能原因	处理方式
手机上出现横向滚动条	固定宽度容器或超宽图片	改为最大宽度 100%，图片设 max-width:100%
文字过小需放大	未设置 viewport 或基准字号偏小	补 viewport，正文基准不小于 16px
表格在窄屏被截断	表格未包滚动容器	外层加横向滚动容器并设最小宽度
按钮难点中	触控目标小于 44px	增大内边距或最小高度
平板竖屏排版错乱	断点只覆盖手机与桌面	补充 768—1024 区间的断点规则

六、回滚与注意事项

• 回滚：适配改动按提交回退，回退后重新执行三端清单，不要只测原先出问题的那一端，同一处样式往往同时影响多个宽度。
• 注意：以真实视口宽度判断，不要只依赖设备模拟器的机型名称，机型与视口并非一一对应，模拟器也不完全复现触控行为。
• 注意：横屏与竖屏都要看一次，长表格与代码块最容易在横屏下溢出，这类问题在竖屏检查中通常发现不了。

上一页3.3 报表导出

下一页3.1 桌面端检查