番号搜索器网页版移动端适配
直接答案：结论先给：番号搜索器网页版的移动端适配以公开命名与检索方法为准，下文按定义、结构、判定三步展开。
番号搜索器网页版在移动端适配上以断点为骨架，覆盖 520 与 820 两级布局切换，同时兼顾触控区最小 44 像素与折叠屏、异形屏的可用性。本文列出断点—布局对照表与四条判定思路，比对加载性能与前端交互模式。示例数据供参考不代表真实统计。 同族里可先看网页端移动适配切定义脉络与网页端移动适配切结构骨架互为参照, 跨族则以番号核验流程与工作单与番号搜索一文说清做外部锚点。
番号搜索器网页版断点体系
作为一种前端设计约定，番号搜索器网页版以 1180 为桌面栅格上限、820 为平板切换点、520 为手机切换点。断点之间由 CSS 媒体查询驱动，与命名族无关。前端只做布局与交互适配，不改变编号规范。相关命名规范见命名族群识别核对。断点：520/820/1180
断点与布局对照表
下表列出三级断点下的栅格、侧栏与触控区尺寸建议：
| 断点区间 | 栅格列 | 侧栏 | 触控区 | 典型设备 |
|---|---|---|---|---|
| ≥ 1180 px | 12 列 | 280 px 固定 | ≥ 40 px | 桌面显示器 |
| 820–1179 px | 8 列 | 折叠为顶部 | ≥ 44 px | 平板与折叠屏展开 |
| ≤ 519 px | 4 列 | 抽屉式 | ≥ 48 px | 手机与折叠屏合拢 |
相关前端结构见前端形态结构。
适配点一：触控区与手势
触控区最小 44 像素是主流可用性规范的下限，超链接与按钮需预留内边距。手势方面，抽屉式侧栏应支持右滑关闭；结果分页支持下拉刷新与上拉加载。相关目录规范可参照番号库编目文档。
适配点二：异形屏与安全区
折叠屏在合拢与展开两态尺寸差别显著，需以 viewport 与 env(safe-area-inset-*) 双管齐下。刘海屏与打孔屏的顶部安全区约 24 至 44 像素。以示例目录 21,300 条估算，移动端首屏渲染平均 480 毫秒。
关于移动端适配的常见问题
为什么选 520 与 820 作为断点
520 覆盖多数直板手机竖屏；820 覆盖平板竖屏与折叠屏展开态。断点选取以主流设备统计为依据，也需结合站点自身流量分布。
触控区能否小于 44 像素
可以但不建议。低于 44 像素时误触率上升；如空间受限，需增大内边距并保持点击区不小于建议下限。
折叠屏是否需要额外一套布局
多数场景共用平板布局即可，仅在合拢态复用手机布局。是否需要独立态取决于站点交互密度。
是否需要禁用桌面版横向滚动
不需要。表格与代码块允许区域内横向滚动，页面主体应始终纵向流。
边界与局限
本文只讨论布局与触控适配层面的判定思路，不涉及性能预算与后端算法。分类边界尚在讨论，示例数据供参考不代表真实统计。
参考资料
- 参照 W3C CSS 媒体查询规范中的断点定义
- 参照 WCAG 2.2 关于触控区最小尺寸的建议
- 参照 Web App Manifest 中的显示模式与安全区章节