Оптимизировать сайт для сенсорных устройств

Question

На сенсорном устройстве, таком как iPhone / iPad / Android, может быть трудно нажать маленькую кнопку пальцем. Я не знаю кросс-браузерного способа обнаружения сенсорных устройств с помощью медиа-запросов CSS. Поэтому я проверяю, поддерживает ли браузер сенсорные события javascript. До сих пор другие браузеры не поддерживали их, но последняя версия Google Chrome на dev-канале включала сенсорные события (даже для не сенсорных устройств). И я подозреваю, что другие производители браузеров будут следовать, так как ноутбуки с сенсорными экранами идут . Обновление: это была ошибка в Chrome, поэтому теперь обнаружение JavaScript снова работает .

Это тест, который я использую:

function isTouchDevice() {
    return "ontouchstart" in window;
}

Проблема в том, что это проверяет, только если браузер поддерживает сенсорные события, а не устройство.

Кто-нибудь знает, как правильно использовать сенсорные устройства для улучшения работы пользователей? За исключением сниффинга пользовательского агента.

У Mozilla есть медиа-запрос для сенсорных устройств. Но я не видел ничего подобного в любом другом браузере: https://developer.mozilla.org/En/CSS/Media_queries#-moz-touch-enabled

Обновление: я хочу избегать использования отдельной страницы / сайта для мобильных / сенсорных устройств. Решение должно обнаруживать сенсорные устройства с обнаружением объектов или аналогичными из JavaScript, или включать пользовательский сенсорный CSS без использования пользовательского агента! Основная причина, по которой я спросил, состояла в том, чтобы удостовериться, что это невозможно сегодня, прежде чем я свяжусь с рабочей группой css3 . Поэтому, пожалуйста, не отвечайте, если вы не можете следовать требованиям в вопросе;)

Answer 1

Мне кажется, что вы хотите использовать сенсорный экран для следующих сценариев:

1. iPhone-подобные устройства: маленький экран, только касание
2. Маленькие экраны, без сенсорного экрана (вы не упомянули этот)
3. Большие экраны, без сенсорного экрана (т.е. обычные компьютеры)
4. Большие экраны с сенсорным экраном, такие как iPad, ноутбуки /шт. с сенсорными экранами.

Для случаев 1 и 2 вам, вероятно, понадобится отдельный сайт или файл CSS, который устраняет множество ненужного контента и делает вещи больше и удобнее для чтения / навигации.Если вам небезразличен случай № 2, тогда, когда ссылки / кнопки на странице ориентированы на клавиатуру, тогда варианты 1 и 2 эквивалентны.

Для случая 3 у вас есть обычный веб-сайт.В случае 4 это звучит так, как будто вы хотите, чтобы кликабельные объекты были больше или легче на ощупь.Если невозможно просто сделать все больше для всех пользователей, альтернативная таблица стилей может предоставить вам удобные для сенсорного экрана изменения макета.

Самое простое, что можно сделать, это предоставить ссылку на сенсорный экран.версия сайта где-то на странице.Для известных сенсорных устройств, таких как iPad, вы можете прослушать пользовательский агент и установить таблицу стилей сенсорного экрана по умолчанию.Однако я хотел бы сделать это по умолчанию для всех;если ваш дизайн выглядит хорошо на iPad, он должен выглядеть приемлемо на любом ноутбуке.Пользователи вашей мыши, обладающие менее чем звездными навыками нажатия, будут рады найти более крупные цели для кликов, особенно если вы добавите соответствующие эффекты :hover или mouseover, чтобы пользователи знали, что на них можно нажимать.

Я знаюВы сказали, что не хотите нюхать пользовательских агентов.Но я бы сказал, что в настоящее время состояние поддержки браузера слишком велико, чтобы беспокоиться о «правильном» способе сделать это.Браузеры в конечном итоге предоставят необходимую вам информацию, но вы, вероятно, обнаружите, что пройдут годы, прежде чем эта информация станет повсеместной.

Answer 2

Хорошие новости!Черновик редактора CSS4 медиазапросов включает новую медиа-функцию ' указатель '.

Типичными примерами "точной" системы наведения являются мыши, трекпад или сенсорный экран на основе стилуса.Сенсорные экраны на пальцах будут квалифицироваться как «грубые».

/* Make radio buttons and check boxes larger if we
   have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

Также можно протестировать медиазапрос из JavaScript:

var isCoarsePointer = (window.matchMedia &&
                       matchMedia("(pointer: coarse)").matches);

Обновлено февраль.11.2013 В Windows 8 последние версии Chrome (версия 24+) обнаруживают сенсорное оборудование при запуске приложения и выставляют сенсорные события.К сожалению, если «pointer: coarse» возвращает false, нет способа узнать, происходит ли это из-за того, что медиа-запросы указателя не реализованы или потому что имеется точный указатель.WebKit еще не реализовал «указатель: хорошо», поэтому мы не можем это проверить.

Обновление 26 сентября.2012 Протестировано в Safari на iOS6 и Chrome на Android 4.1.1, но его пока нет.Медиа-запросы 'pointer' и 'hover' находятся в WebKit 30 мая.Согласно User-Agent, Safari использует ветку WebKit 536.26 с 25 апреля, а Chrome на Android использует и даже более старый (535.19).Не уверен, что ветки WebKit из строк User-Agent заслуживают доверия, но моя тестовая страница также не может обнаружить указатель медиа-запросов.В реализации от мая реализован только медиа-запрос указателя для сенсорных устройств, поэтому pointer: fine не будет работать для устройств с мышью.

Answer 3

Я не знаю, решит ли стандартный медиа-запрос, такой как Mozilla, проблему самостоятельно. Как сказал один из разработчиков Chromium в своем обсуждении, наличие поддержки сенсорных событий в браузере не означает, что сенсорные события могут или будут срабатывать, или даже если они это сделают, то пользователь захочет взаимодействовать только посредством сенсорного ввода. , Аналогично, наличие поддержки сенсорного ввода в устройстве не означает, что пользователь будет использовать этот метод ввода - возможно, устройство поддерживает мышь, клавиатуру и сенсорный ввод, а пользователь предпочитает мышь или некоторую комбинацию из трех типов ввода.

Я согласен с разработчиком Chromium, что поддержка сенсорных событий не была ошибкой в ​​браузере. Хороший браузер должен поддерживать сенсорные события, потому что он может быть установлен на устройстве, которое поддерживает сенсорный ввод. Разработчик веб-сайта виноват в том, что он воспринял поддержку событий как означающую, что пользователь будет взаимодействовать с помощью прикосновения.

Кажется, нам нужно знать две вещи: (1) Каковы все поддерживаемые типы ввода на устройстве (2) Какие все типы событий поддерживаются в браузере

Так как мы не знаем # 1 сейчас, есть один подход, предложенный PPK из quirksmode, который мне нравится. Он говорит об этом здесь: http://www.quirksmode.org/blog/archives/2010/02/do_we_need_touc.html#link4

По сути, слушайте сенсорные события и события мыши, а когда они происходят, настройте пользовательский интерфейс соответствующим образом. Очевидно, что это ограничивает разработчика. Я не думаю, что это правильный подход к вашей проблеме с размером ссылки, потому что вы не хотите ждать взаимодействия, чтобы изменить пользовательский интерфейс. Весь смысл в том, чтобы представить другой интерфейс (ссылку большего / меньшего размера) до того, как произойдет какое-либо взаимодействие.

Я надеюсь, что вы сделаете свое предложение, и оно будет включено в CSS3. До тех пор, насколько мне больно это говорить, нюхание агента пользователя выглядит лучшим подходом.

p.s. Я надеюсь, надеюсь, надеюсь, кто-то придет сюда и докажет, что я не прав

Answer 4

В Google Chrome есть переключатель командной строки для включения сенсорных событий . Отключено по умолчанию. Поэтому до тех пор, пока они не включат их снова для всех (надеюсь, что они этого не сделают), можно обнаружить прикосновение с помощью javascript, как я описал в этом вопросе. .

Обновление от 3 июня 2010 : Это действительно вошло в стабильную версию 25 мая 2010 года :( Не знаю, была ли это ошибка или нет.

Обсудили проблему в списке рассылки w3c, но я сомневаюсь, что что-то произойдет очень скоро. http://lists.w3.org/Archives/Public/www-style/2010May/0411.html Они могут обсудить это во время TPAC в ноябре.

Обновление 30 сентября 2010 : предположительно исправлено в Chrome 6. У него еще не было времени для перехода на стабильный, чтобы проверить. Поскольку обновление Chrome происходит автоматически, этой проблемы уже не должно быть:)

Прочтите это, если вы планируете использовать медиа-запросы: http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ и http://www.quirksmode.org/blog/archives/2010/09/more_about_medi.html

Обновление от 16 мая 2011 г. : W3C сейчас работает над спецификацией Touch Events , но более или менее отказался скрыть сенсорные события для терминалов без сенсорного оборудования , Поэтому не ожидайте, что обнаружение сенсорного события будет работать долго.

Обновление от 6 июня 2012 г. : В спецификации W3C CSS4 Media Queries (Editors Draft) есть кое-что очень интересное. См. Мой отдельный ответ об этом.

Answer 5

Нет, такого нет. У CSS есть опция размера экрана, которая позволит вам оптимизировать макет, но это все. Существует также media="handheld", но это также не относится к вашим требованиям.

Обнаружение функций может работать с использованием javascript, однако существуют проблемы с различными событиями для разных устройств. PPK (человек, стоящий за quirksmode.org) проделывает огромную работу, проверяя, какой javascript возможен для каждого мобильного / портативного устройства, и доказывает, что ничто не кажется стандартным для этих устройств, и тем не менее этот STILL не применяется к требование для сенсорных ноутбуков.
(честно говоря, я не знаю, почему вас беспокоит устройство, которое еще не вышло, будьте прагматичны и переживайте по этому поводу, как только оно появится здесь, и вы сможете протестировать его)

Работа PPK в мобильном браузере и сенсорных событиях сэкономит вам часы. Проверьте это здесь

Answer 6

См. http://crbug.com/136119 для поддержки добавления указателя: отлично в Chrome. На самом деле можно определить, поддерживается ли указатель: грубый (чтобы отличить unset от не поддерживаемого) - просто создайте медиазапрос самостоятельно и проверьте в javascript, правильно ли он был проанализирован.

Например, сегодня "@media (указатель: грубый)" в Chrome обнаруживается:

> document.styleSheets[0].rules[5].media[0]
"(pointer: coarse)"

Но неподдерживаемые фиктивные значения, такие как "@media (pointer: other)", не:

> document.styleSheets[0].rules[8].media[0]
"not all"

Answer 7

попробуйте использовать таблицы и сделать полную ячейку ссылкой Я работаю над этим на моем сайте ... это пока не работает хорошо ... но вы могли бы найти способ ... Таким образом, нет необходимости перегружать ваш сайт с помощью обнаружения JavaScript и функциональности ... Вы можете дать ему относительный размер instread фиксированного размера ... и таким образом, ваш сайт можно просматривать на рабочем столе, как в iphone ... подумай об этой идее ... Любое предложение приветствуется ...

Answer 8

Не полное решение, но вы можете просто избегать маленьких кнопок. Хотя маленькие кнопки представляют большую проблему для удобства использования на сенсорных устройствах, ими всегда сложно пользоваться, даже с большим экраном и мышью.

Если вы просто обратите внимание на использование достаточно больших кнопок с достаточным пространством между ними, все выиграют. Кроме того, это заставит вас не загромождать ваш интерфейс слишком большим количеством маленьких кнопок: -).

Answer 9

Apple имеет TouchEvents, определенные только для iPhone OS FWIW

Answer 10

Если вы используете PHP, это хорошее решение:

http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/

Чтобы определить, является ли браузер телефоном со стороны сервера, можно узнать сведения о запросе браузера и, если это так, отобразить альтернативные / дополнительные таблицы стилей / js / html