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

хорошая новость! Редакторский проект Css4 Media Queries включили новую функцию СМИ 'указатель'.

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

/* 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-й. На Windows 8 Последние версии Chrome (версия 24+) обнаруживают сенсорное оборудование при запуске приложения и выставляют сенсорные события. К сожалению, если "указатель: грубый" возвращает false, нет способа узнать, связано ли это с тем, что запросы мультимедиа указателя не реализованы или потому, что есть точный указатель. WebKit нет "указатель: отлично", так что мы не можем проверить, что либо.

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

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

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

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

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

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

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

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

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 мая: W3C теперь работает над спецификация событий касания, а более или менее отказался чтобы скрыть события касания для терминалов без сенсорного оборудования. Поэтому не ожидайте, что обнаружение событий касания будет работать длинный.

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

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

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

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

Яблоко TouchEvents определяется только для iPhone OS FWIW

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

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

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

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

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

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

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

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

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

лучше всего создать мобильную версию сайта или альтернативную таблицу стилей, которая загружается при обнаружении мобильного устройства с Javascript.

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

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

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