Я занимаюсь разработкой веб-сайта, который будет просматриваться на мобильных устройствах, и мне нужно определить, какой размер в пикселях CSS нужно создать для сенсорных целей.
В Руководстве по доступности веб-контента (WCAG) 2.1 критерий успеха 2.5.5 требуются сенсорные цели не менее 44 x 44 пикселей CSS. Рекомендации Apple по интерфейсу пользователя (HIG) для iOS рекомендует 44 x 44 балла и Рекомендации Google по дизайну материалов рекомендует 48 x 48 точек на дюйм.
Я бы хотел сравнить рекомендации HIG и Material Design с WCAG. Как я могу сравнить пиксели CSS, точки iOS и dp Android? Желательно, чтобы я научился конвертировать точки iOS и Android dp в пиксели CSS.
Вот что я понимаю до сих пор:
Точки iOS = (ширина в физических пикселях) / собственный масштабный коэффициент и 1 физический пиксель = 1 точка на экране с 163 ppi.
Android dp = (ширина в физических пикселях * 160) / плотность экрана и 1 физический пиксель = 1 dp на экране со 160 ppi.
1 CSS-пиксель соответствует 1/96 от 1 дюйма. Однако столбец «CSS ppi» в таблице «Сравнение устройств» внизу этого сайта заставляет задуматься, не является ли 1 пиксель CSS не всегда 1/96 от 1 дюйма.
Я был бы удовлетворен, если бы по крайней мере смог преобразовать точки iOS и Android dp в пиксели CSS для определенного экрана, например, экрана iPad (6-го поколения) : 9,7-дюймовый дисплей, 4: 3 соотношение сторон, разрешение 2048 x 1536 пикселей при 264 ppi (дисплей сетчатки).