Axis笔记

外观

3.1 桌面端检查

约 605 字

适配多端

本页对应「三、操作步骤」的 3.1，在 1440×900 视口下检查布局、导航、悬停态与正文可读性，并留下基线截图供后续对比。返回上级：多端适配检查。

前置条件

  • 站点线上地址可访问，浏览器已清空缓存或开启无痕窗口。
  • 已确认站点断点定义，例如在样式文件中能检索到 @media 规则。
  • 已准备截图工具或浏览器自带截图功能，用于保存基线。

操作步骤

  1. 确认页面在桌面视口下的基本信息与资源加载情况：
curl -sS -o /dev/null -w "%{http_code} %{time_total}\n" https://example.com/
curl -sSI https://cdn.example.com/assets/app.css | head -n 5

  1. 在 1440×900 视口下逐项检查：导航是否单行完整显示、侧栏与正文比例是否合理、代码块是否可横向滚动。

  2. 用审计报告核对视口声明与内容宽度，再结合浏览器控制台确认没有溢出：

npx lighthouse "https://example.com/" --preset=desktop \
  --only-audits=viewport --output=json --output-path=/tmp/desk.json \
  --chrome-flags="--headless --no-sandbox" --quiet
jq '{viewport: .audits.viewport.score}' /tmp/desk.json
# 在控制台执行，结果为 true 表示无横向溢出
# document.documentElement.scrollWidth <= window.innerWidth
  1. 检查悬停态与焦点态：主导航、卡片、按钮各悬停一次，确认颜色变化明显且不引起布局跳动。

结果确认

  • 首页返回 200，静态样式文件可访问且响应头含内容类型。
  • content-width 审计得分为 1，页面未宽于视口。
  • 导航在一行内完整显示，未换行遮挡；侧栏与正文比例协调。
  • 悬停与焦点态有可见反馈，元素尺寸变化不超过 2px。

注意事项

  • 桌面端也要检查 1280 宽度，很多笔记本的实际可用宽度小于 1440。
  • 悬停态不能作为唯一反馈，键盘焦点也要有同等可见的样式。
  • 基线截图命名带日期与视口尺寸，便于后续逐版对比。
  • 检查要在真实浏览器中完成，仅看构建产物无法发现字体替换与图片加载失败。
  • 浏览器缩放 125% 与 150% 也要看一次，部分布局在缩放后才会暴露溢出。
  • 桌面端的鼠标悬停与键盘焦点分别验证，两者样式不一致时要明确以哪一套为准。