Axis笔记

外观

3.2 平板端检查

约 595 字

适配验证

本页对应「三、操作步骤」的 3.2，在 768×1024 与 1024×768 两个视口下检查栅格切换、表格滚动与触控目标，确认手机与桌面之间的中间档没有断档。返回上级：多端适配检查。

前置条件

  • 3.1 桌面端检查已通过，基线截图已保存。
  • 已确认站点在 768—1024 区间使用哪套栅格与断点规则。
  • 页面清单中包含至少一个含表格的页面，用于验证横向滚动。

操作步骤

  1. 先确认样式中的断点覆盖了平板区间，避免只有手机与桌面两套规则：
curl -sS https://cdn.example.com/assets/app.css -o /tmp/app.css
grep -oE '@media[^{]+' /tmp/app.css | sort -u

  1. 在 768×1024 竖屏下检查：导航是否折叠为菜单、卡片是否两列、正文是否仍可读。

  2. 在 1024×768 横屏下重复检查，重点看表格与代码块是否溢出：

# 统计表格容器是否设置了横向滚动
grep -c 'overflow-x: auto\|overflow-x:auto' /tmp/app.css
  1. 检查触控目标尺寸，交互元素高度应不小于 44px：
node - <<'EOF'
const sizes = [44, 44, 40, 48];
const bad = sizes.map((h, i) => ({ i, h })).filter(x => x.h < 44);
console.log("too_small:", bad);
EOF

结果确认

  • @media 列表中存在 768 或 1024 附近的断点规则，平板不是简单继承桌面样式。
  • 竖屏下卡片按两列排布，横屏下按三列或保持两列，均无重叠。
  • 含表格页面在窄屏可横向滚动，页面本身不产生横向滚动条。
  • 按钮与链接的触控高度不小于 44px，相邻目标间距不少于 8px。

注意事项

  • 平板常被当作放大的手机，实际可用宽度更大，两列布局比单列更合适。
  • 表格滚动容器要设置 -webkit-overflow-scrolling: touch，否则滚动体验差。
  • 横竖屏切换后重新检查一次，部分布局问题只在旋转后出现。
  • 平板常以触控为主，链接与按钮不要只靠悬停态提示可点击。
  • 检查软键盘弹出后的页面表现，输入框获得焦点时固定定位元素容易被顶起遮挡。
  • 同一断点区间内的两种宽度都要测，768 与 1024 的实际内容宽度差异足以改变换行结果。