当您的设计在移动设备上显示时，您应确保按钮或链接等互动元素足够大并在周围留出足够的空间，以便用户轻松点按它们，而不会意外重叠到其他元素上。这不仅会让所有用户受益，更会为行动不便的人带来极大帮助。
对于正确设置移动视口的网站，建议的最小触摸目标大小约为 48 个设备无关像素。 例如，尽管一个图标的宽度和高度仅为 24px，您仍然可以使用额外边距将点按目标大小增加到 48px。48x48 像素的面积约为 9mm 见方，与一个人手指垫的面积大小相当。
在演示中，我为所有链接添加了内边距，以确保它们符合最小尺寸要求。
不同触摸目标之间在水平和垂直方向上还应留出大约 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;
}
}
如需详细了解指针等互动媒体功能，请参阅自适应网站设计基础知识一文。