Когда ваш дизайн отображается на мобильном устройстве, вы должны убедиться, что интерактивные элементы, такие как кнопки или ссылки, имеют достаточно большой размер и вокруг них достаточно места, чтобы их можно было легко нажимать без случайного наложения на другие элементы. Это приносит пользу всем пользователям, но особенно полезно для тех, у кого есть двигательные нарушения.
Минимальный рекомендуемый размер сенсорного экрана составляет около 48 пикселей, независимых от устройства, на сайте с правильно настроенной областью просмотра для мобильных устройств. Например, хотя ширина и высота значка может составлять только 24 пикселя, вы можете использовать дополнительные отступы, чтобы увеличить целевой размер касания до 48 пикселей. Область размером 48x48 пикселей соответствует примерно 9 мм, что соответствует размеру подушечки пальца человека.
В демо-версии я добавил отступы ко всем ссылкам, чтобы убедиться, что они соответствуют минимальному размеру.
Цели касания также должны быть расположены на расстоянии около 8 пикселей друг от друга как по горизонтали, так и по вертикали, чтобы палец пользователя, нажимающий на одну цель касания, случайно не касался другой цели касания.
Тестирование целей касания
Если вашей целью является текст и вы использовали относительные значения, такие как em или rem для определения размера текста и любых полей, вы можете использовать DevTools, чтобы убедиться, что вычисленное значение этой области достаточно велико. В приведенном ниже примере я использую em для текста и заполнения.
Проверьте a и в Chrome DevTools переключитесь на панель «Вычисляемые» , где вы сможете проверить различные части поля и посмотреть, какой размер пикселя они разрешают. В Firefox DevTools есть панель макета. На этой панели вы получаете фактический размер проверяемого элемента.
Использование медиа-запросов для обнаружения использования сенсорного экрана
Вместо того, чтобы просто проверять размеры области просмотра, а затем предполагать, что небольшие размеры, скорее всего, принадлежат телефонам или планшетам, которые, в свою очередь, используют сенсорный экран, теперь есть более надежные способы адаптировать ваш дизайн на основе реальных возможностей устройства.
Одна из медиа-функций, которую мы теперь можем проверить с помощью медиа-запросов, — это то, является ли основной ввод пользователя сенсорным экраном ( pointer ) и является ли какой-либо из обнаруженных в данный момент вводов сенсорным экраном ( any-pointer ). Функции pointer и any-pointer вернут значения fine или coarse . Лучшим указателем будет тот, кто использует мышь или трекпад, даже если эта мышь подключена к телефону через Bluetooth. coarse указатель указывает на сенсорный экран, который может быть мобильным устройством, но также может быть экраном ноутбука или большого планшета.
Если вы настраиваете CSS в медиа-запросе, чтобы увеличить цель касания, тестирование грубого указателя позволит вам увеличить цель касания для всех пользователей сенсорного экрана. Это дает большую площадь касания, независимо от того, является ли устройство телефоном или более крупным устройством.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Вы можете узнать больше о функциях интерактивного мультимедиа, таких как указатель, в статье «Основы адаптивного веб-дизайна» .