当您的设计在移动设备上显示时，您应确保按钮或链接等互动元素足够大，并在周围留出足够的空间，以便轻松按下，而不会意外重叠到其他元素上。这对所有用户都有好处，对有运动障碍的所有人尤其有用。
在正确设置移动设备视口的网站上，建议的最小触摸目标大小约为 48 个设备无关像素。例如，虽然图标的宽度和高度只能为 24 像素，但您可以使用额外的内边距将点按目标的大小增加到 48 像素。48x48 像素区域对应约 9 毫米，与一个人手指垫区域的大小相当。
在演示中，我为所有链接添加了内边距，以确保它们满足最小尺寸要求。
此外，各触摸目标在水平和垂直方向上还应保持大约 8 像素的间隔，以便用户手指按一个点按目标不会意外触摸另一个点按目标。
测试触摸目标
如果您的目标是文本，并且已使用 em 或 rem 等相对值设置文本大小和内边距，则可以使用开发者工具检查该区域的计算值是否足够大。在下面的示例中，我将 em 用于文本和内边距。
检查该链接的 a，然后在 Chrome 开发者工具中切换到 Computed 窗格，您可以在其中检查框的各个部分，并查看它们解析为哪种像素大小。Firefox 开发者工具中有一个布局面板。
在该面板中，您可以获取所检查元素的实际尺寸。
使用媒体查询检测触摸屏使用
现在，有了更可靠的方法来根据实际设备功能调整您的设计，而不是简单地测试视口尺寸，然后猜测小尺寸可能是手机或平板电脑（而后者会使用触摸屏）。
现在，我们可以使用媒体查询测试的一项媒体功能是用户的主要输入是否为触摸屏 (pointer)，以及当前检测到的输入中是否有任何是触摸屏 (any-pointer)。pointer 和 any-pointer 功能将返回 fine 或 coarse。精细指针指使用鼠标或触控板的用户，即使该鼠标已通过蓝牙连接到手机也是如此。coarse 指针表示触摸屏，可以是移动设备，也可以是笔记本电脑屏幕或大屏平板电脑。
如果您要调整媒体查询中的 CSS 以增加触摸目标，测试粗略指针可让您增加所有触摸屏用户的点按目标。这样一来，无论设备是手机还是更大的设备，点按区域都会增大。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
如需详细了解互动媒体功能（例如指针），请参阅自适应网页设计基础知识一文。