北京
```html移动端触控与缩放：WCAG标准与代码实践移动端触控与缩放：WCAG标准与代码实践
把手机拿起来，用拇指去点一个社交图标。如果点到了旁边的链接，问题不在你的手，在那个图标只有16×16像素。
移动端体验里有两个老问题，常年被前端开发忽略：触控区域（Touch Target）和缩放（Zoom）。它们不涉及新框架，也不涉及性能优化，但直接决定一个界面能不能被正常使用。
第一类问题：按钮或链接太小、彼此挨得太近，手指根本没法精确点中。第二类问题：网站禁用了缩放，或者用户一放大，布局就散架。
几个反复出现的坑
- 社交图标做成16×16像素
- 文本链接紧贴在一起，中间没有安全间距，比如“编辑 | 删除”
- 在viewport元标签里加
user-scalable=nomaximum-scale=1 - 字号用px写死，不响应用户的缩放设置
这四条里，前两条是尺寸问题，后两条是态度问题——等于替用户决定了他不需要放大。
WCAG给出的两条硬线
触控区域最小24×24像素，这是WCAG 2.2的AA级要求；更理想的是44×44像素，对应AAA级。
缩放方面，用户应当能放大到200%，内容不被裁切，也不需要横向滚动，对应SC 1.4.4。缩放开关永远不要关，把控制权留给用户。
落到代码上
思路很简单：图标本身可以小，但可点击区域要撑到44×44。给按钮设min-width和min-height为44px，用inline-flex居中，再加10px内边距，相邻按钮之间自然就有了安全距离。
/* ❌ 错误：16像素图标，无内边距 */.icon-btn {width: 16px;height: 16px;/* ✅ 正确：可点击区域44×44，图标本身可以小 */.icon-btn {min-width: 44px;min-height: 44px;display: inline-flex;align-items: center;justify-content: center;padding: 10px;}字号则改用相对单位。16px写死的标题，用户调大浏览器默认字号时纹丝不动；换成1.25rem，它就会跟着变。
/* ❌ 错误：固定px，不响应用户设置 */.title {font-size: 16px;/* ✅ 正确：rem跟随浏览器默认字号 */.title {font-size: 1.25rem;}并排的“编辑”“删除”不要做成两个紧贴的文本链接，拆成独立按钮，留出标准间距和足够高度。
三秒钟自测法
在真机上打开页面，用拇指去点一个小按钮。如果点到了旁边那个，触控区域就有问题。
然后连按三次缩放，手机双指捏合，桌面按Ctrl加滚轮。页面结构一乱，缩放就有问题。
工具层面
Chrome DevTools的Rendering面板可以打开CSS overview，直观检查尺寸和对比度；Lighthouse的Accessibility部分会给出“Touch targets are sized appropriately”这条检查。但真机手动测试，没有东西能替代。
这两项检查加起来不到一分钟，却覆盖了移动端最容易被跳过的一层体验。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
