本页对应「三、操作步骤」的 3.3，在 390×844 视口下确认无横向滚动、字号可读、菜单可展开收起，并核对首屏内容与加载表现。返回上级：多端适配检查。

前置条件

• 3.1 与 3.2 已通过，平板档位没有遗留问题。
• 移动视口固定为 390×844，设备像素比按 3 模拟。
• 已确认站点的移动端菜单实现方式，是折叠按钮还是抽屉。

操作步骤

1. 确认 viewport 声明存在且未被页面内样式覆盖：

curl -sS https://example.com/ | grep -o '<meta name="viewport"[^>]*>'

2. 用移动预设采集一次，重点看视口与可读性相关审计项：

npx lighthouse "https://example.com/" --preset=mobile \
  --only-categories=performance,accessibility \
  --output=json --output-path=/tmp/mobile.json \
  --chrome-flags="--headless --no-sandbox" --quiet
jq '.audits | {viewport: .viewport.score, tap: .["tap-targets"].score}' /tmp/mobile.json

3. 在 390 宽度下逐页检查横向溢出，控制台执行后应为 true：

# 浏览器控制台执行
# document.documentElement.scrollWidth <= window.innerWidth
# 并逐个检查疑似超宽元素
# [...document.querySelectorAll("*")].filter(e => e.scrollWidth > window.innerWidth)

4. 展开与收起移动菜单，检查打开状态下背景是否可滚动、关闭后焦点是否回到按钮。

结果确认

• 页面包含 width=device-width 的 viewport 声明，且 initial-scale=1。
• viewport 与 tap-targets 审计得分均为 1，无尺寸过小的交互元素。
• 控制台判断为 true，无横向滚动条；长代码块在自身容器内滚动。
• 菜单展开时背景锁定，收起后页面位置不跳变，焦点回到触发按钮。

注意事项

• 首屏内容不要依赖悬停，移动端没有 hover 状态，信息需直接可见。
• 正文基准字号不小于 16px，输入框字号小于 16px 会触发自动放大。
• 检查时用真实视口宽度而不是机型名称，同一机型在不同浏览器下视口可能不同。
• 首屏不要放需要横向滑动才能看全的内容，滑动提示在小屏上几乎不可见。
• 点击区域之间留出间距，相邻链接过近时容易误触，尤其是页脚与列表项。
• 移动网络下重新加载一次，弱网会把图片与字体的加载顺序问题放大。

上一页3.2 平板端检查