#javascript #css #tablet
#javascript #css #планшет
Вопрос:
Я занимаюсь редизайном веб-сайта, который использует эффект наведения курсора мыши на кнопку (например, изображения кнопок меняются, когда вы наводите на нее курсор мыши, и когда вы нажимаете на нее, она переходит на другую страницу).
Теперь это отлично работает, если вы находитесь на настольном компьютере / ноутбуке. Но на планшете эффект наведения курсора мыши не работает. На планшете при нажатии на изображение кнопки оно ненадолго меняется, а затем сразу переходит на новую страницу.
Какими методами веб-сайт может определить, заходит посетитель с планшета или нет? Тогда было бы возможно переключиться на версию CSS для планшета? Или есть ли платформа для планшета (например, Modernizer?) что может помочь в этом процессе?
Ответ №1:
Сенсорные устройства не имеют события наведения, и нет способа эмулировать взаимодействие с пользователем, которое могло бы его инициировать. Убедитесь, что нет критической функциональности, связанной с событиями наведения (большинство из них просто выделяют), чтобы не было потери функциональности, если устройство ее не имеет. Отслеживание браузером строки UA является ошибочной стратегией — вы должны обновлять ее каждый раз, когда появляется новое устройство или строка изменяется для существующего устройства. Отлично, если вас интересуют высокие цены на обслуживание, но не в том случае, если за это платите вы.
Комментарии:
1. На самом деле это не так. Во-первых, строка не изменилась для iPad, iPhone или даже для Samsung Galaxy tab. Я знаю это, потому что скрипт, который я написал 6 лет назад для выполнения именно этого, все еще отлично работает и также справляется с iPad mini. Во-вторых, при условии, что ваша стратегия обнаружения является достаточно общей, будущая технология все еще может быть обнаружена.
2. Прослушивание браузера по строке UA было признано ошибочной стратегией более десяти лет. У некоторых планшетов есть функция наведения (я видел это в планшетах на базе Windows), у некоторых нет. Откуда вы знаете, что будущие iPad или iPhone не добавят его? Они способны делать это сейчас, просто это не реализовано.
Ответ №2:
Вы могли бы идентифицировать iPad (или мобильное устройство), просто проверив параметр User-Agent браузера.
В PHP, например, вы могли бы сделать что-то вроде:
if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }
Если вы хотите получить его дальше, вы могли бы использовать WURFL (http://wurfl.sourceforge.net /)