触摸目标最小尺寸必须为48px×48px，需用rem/em、viewport、padding扩展及min-width/min-height等手段保障，svg/canvas需手动映射点击区，最终须真机验证。
触摸目标最小尺寸必须硬性达标
移动端点击区域过小是导致误触、操作失败的头号原因。浏览器不会自动放大你的 <button></button> 或 <a></a>，它只按你写的 CSS 尺寸渲染。所以“适配屏幕”不是靠 JS 算比例，而是先守住底线：所有可点击元素的物理尺寸在设备上至少为 48px × 48px。
实际做法：
- 不用 px 写死宽高，改用 rem 或 em，配合根字体大小动态调整
- 在 <meta name="viewport"> 中确保 initial-scale=1，否则缩放会破坏像素换算
- 对图标按钮这类内容窄的元素，用 padding 扩展点击区，而不是只靠 width/height
- 避免把 font-size: 12px 的文字直接包进 <a></a> 里当按钮——它撑不开 48px 高度
响应式点击区域不能只靠媒体查询切断点
单纯用 @media (max-width: 768px) { ... } 给小屏加 padding 是常见但低效的做法。断点只能覆盖有限几种尺寸，而真实设备分辨率是连续的（比如 1366×768、1440×900、2560×1600），靠几个固定断点无法穷举。
更可靠的方案：
- 使用 min-width 和 min-height 强制保底尺寸，例如 min-width: 48px; min-height: 48px;
- 对容器类点击区（如整个卡片可点击），用 aspect-ratio + width: 100% 控制比例，再结合 min-block-size 防止压缩过小
- 若用 JavaScript 动态设置，优先监听 resize 而非 orientationchange，后者已废弃且不触发横竖屏细微变化
Flex/Grid 布局中点击区容易被父容器挤压
用 display: flex 或 display: grid 排列按钮时，子项默认不继承父容器的最小尺寸约束。常见翻车现场是：在窄屏下，flex: 1 把按钮压成一条线，grid-template-columns: 1fr 1fr 让两个按钮各占 50%，结果每个都不到 40px 宽。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
补救手段：
- 给可点击子项加 min-width: max(48px, 15%);，兼顾绝对值与相对占比
- 在父容器上设 gap 替代 margin，避免负 margin 吞掉点击区
- 避免对按钮本身用 transform: scale() 模拟缩放——它不扩大事件响应区域，只是视觉放大
SVG 和 Canvas 内部点击区域需手动映射
SVG 的 <path></path> 或 Canvas 绘制的图形，其点击区域默认只响应路径描边或填充内部，且不随视口缩放自动适配。用 viewBox 缩放 SVG 时，内部 <circle cx="10" cy="10" r="5"></circle> 在 2x 屏幕上物理尺寸可能只剩 2.5px，远低于 48px 下限。
解决方式：
- SVG 外层容器设 width: 100%; height: auto;，并用 preserveAspectRatio="xMidYMid meet"
- 对关键可点击图形，额外套一层 <g></g> 并加 pointer-events: bounding-box;
- Canvas 需在 JS 中根据 window.devicePixelRatio 和 canvas 实际渲染尺寸重算点击坐标，不能直接用 event.offsetX/Y
真正难的不是写适配代码，而是每次加一个按钮前，都得问一句：它在 iPhone SE 屏幕上是不是真能被拇指准确点中？这个判断没法靠模拟器代替，必须真机测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
