我正在开发一个可在移动设备上查看的网站,我需要确定CSS像素的大小来确定触摸目标。
Web内容可访问性指南(WCAG)2.1 success criterion 2.5.5要求触摸目标至少为44 x 44 CSS像素。 Apple’s Human Interface Guidelines (HIG) for iOS建议44 x 44点,Google’s Material Design guidelines建议48 x 48 dp。
我想将HIG和材料设计指南与WCAG进行比较。如何比较CSS像素,iOS点和Android dp?最好,我想学习如何将iOS点和Android dp转换为CSS像素。
这是我到目前为止所了解的:
iOS点=(以物理像素为单位的宽度)/ native scale factor,并且在163 ppi的屏幕上1个物理像素= 1个点。
Android dp =(物理像素的宽度* 160)/屏幕密度和1个物理像素=在160 ppi的屏幕上为1 dp。
1 CSS pixel等于1英寸的1/96。但是,this site底部“比较设备”表中的“ CSS ppi”列使我想知道1个CSS像素是否不总是1英寸的1/96。
如果至少可以在特定屏幕上将iOS点和Android dp转换为CSS像素(例如iPad (6th generation):9.7英寸显示屏,4:3宽高比,2048 x 1536),我会感到满意像素分辨率为264 ppi(视网膜显示)。