当您的设计在移动设备上显示时，您应确保按钮或链接等互动元素足够大，并且周围有足够的空间，以便用户可以轻松按下它们，而不会意外地重叠到其他元素上。这使所有用户受益，但对有运动障碍的任何人尤其有帮助。
在一个正确设置了移动视口的网站上，最小建议触摸目标尺寸约为 48 设备独立像素。例如，虽然图标的宽度和高度可能只有 24 像素，但您可以使用额外的内边距将点击目标尺寸增加到 48 像素。48x48 像素区域大约对应 9 毫米，这大约是一个人指腹区域的大小。
在演示中，我已向所有链接添加了内边距，以确保它们符合最小尺寸要求。
触摸目标也应在水平和垂直方向上间隔约 8 像素，这样用户的手指按下一个点击目标时不会不小心触碰到另一个点击目标。
测试您的触摸目标
如果您的目标是文本，并且您使用了相对值（例如 em 或 rem）来调整文本和任何内边距的大小，则可以使用 DevTools 检查该区域的计算值是否足够大。在下面的示例中，我将 em 用于我的文本和内边距。
检查链接的 a，然后在 Chrome DevTools 中切换到“计算值”窗格，您可以在其中检查框的各个部分，并查看它们解析为的像素大小。在 Firefox DevTools 中，有一个“布局”面板。在该面板中，您可以获得检查元素的实际大小。
使用媒体查询检测触摸屏使用
现在，除了简单地测试视口尺寸，然后猜测小尺寸很可能是手机或平板电脑（进而使用触摸屏）之外，还有更可靠的方法可以根据实际设备功能来调整您的设计。
我们现在可以使用媒体查询测试的媒体功能之一是用户的主要输入是否为触摸屏 (pointer)，以及当前检测到的任何输入是否为触摸屏 (any-pointer)。pointer 和 any-pointer 功能将返回 fine 或 coarse。精细指针将是使用鼠标或触控板的人，即使该鼠标通过蓝牙连接到手机。coarse 指针表示触摸屏，这可能是移动设备，但也可能是笔记本电脑屏幕或大型平板电脑。
如果您在媒体查询中调整 CSS 以增加触摸目标，则测试粗糙指针允许您为所有触摸屏用户增加点击目标。无论设备是手机还是更大的设备，这都提供了更大的点击区域。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
您可以在响应式 Web 设计基础知识文章中找到有关交互媒体功能（例如指针）的更多信息。