当您的设计在移动设备上显示时 您应确保按钮或链接等互动元素足够大, 并在周围留有足够空间 使其易于点按,而不会意外重叠到其他元素上。 这能让所有用户受益 但对有运动障碍的人来说尤其有用。
建议的最小触摸目标大小约为 48 个设备无关像素 在正确设置移动视口的网站上投放 例如,虽然一个图标的宽度和高度可能只有 24 像素, 可以使用额外的内边距将点按目标的尺寸调整为最大 48px 48x48 像素的面积约为 9 毫米 大约相当于用户手指垫面积的大小。
在该演示中,我为所有链接添加了内边距,以确保它们满足最小尺寸。
各个触摸目标之间也应间隔大约 8 像素 包括水平和垂直方向 这样,用户的手指按下一个点按目标就不会意外碰到另一个点按目标。
测试触摸目标
如果您的目标是文本,并且使用了相对值(例如 em
或 rem
)来设置文本和所有内边距,
您可以使用开发者工具检查该区域的计算值是否足够大。
在以下示例中,我对文本和内边距使用了 em
。
检查链接的 a
,
在 Chrome 开发者工具中,切换到 Computed 窗格,以便检查该框的各个部分
看看它们可解析为哪种像素大小
在 Firefox 开发者工具中,有一个布局面板。
在该面板中,您将获得所检查元素的实际尺寸。
![Firefox 开发者工具中的布局面板,显示元素的大小](https://web.developers.google.cn/static/articles/accessible-tap-targets/image/the-layout-panel-firefox.jpeg?authuser=7&hl=ro)
使用媒体查询检测触摸屏使用情况
不要简单地测试视口尺寸 小尺寸的屏幕很有可能是手机或平板电脑,而这反过来 使用触摸屏,现在还有其他更稳健的适应性方式 根据实际设备功能进行设计。
我们现在可以使用媒体查询测试一项媒体功能
设置用户的主要输入源是否为触摸屏 (pointer
);
当前检测到的输入是否任何是触摸屏 (any-pointer
)。
pointer
和 any-pointer
功能将返回 fine
或 coarse
。
精确指针指使用鼠标或触控板的用户
(即使该鼠标已通过蓝牙连接到手机)。
coarse
指针表示触摸屏,
该平台可以是移动设备,也可以是笔记本电脑屏幕或大屏平板电脑。
如果您要调整媒体查询中的 CSS 以增加触摸目标, 粗略指针测试可让您提高所有触摸屏用户的点按目标。 这样一来,无论设备是手机还是尺寸更大的设备,点按区域都会越大。
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
您可以详细了解指针等互动媒体功能 自适应设计基础知识一文。