Лучшие практики для обнаружения и форматирования для мобильных браузеров - PullRequest
Новая
       20

Лучшие практики для обнаружения и форматирования для мобильных браузеров

4 голосов
/ 08 июля 2011

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

Как определить, просматривает ли пользователь мой сайт с мобильного устройства?

Когда я это сделаю, должен ли я:

  1. Проверить, есть ли у пользователя мобильное устройство, а затем переслать его на другой сайт?Я думаю, что преимущества будут:

    • Я могу оптимизировать макет с обоих сайтов для размера экрана
    • Я могу использовать разные методы на двух сайтах (например, jquery mobile для мобильных устройств)

  2. Использование CSS для разных размеров экрана => как на tutsplus Я думаю, что преимущество будет:

    • Мне нужно толькоодин сайт, но мне кажется, что куча работы, когда речь идет о небольшом интернет-магазине

Ответы [ 4 ]

3 голосов
/ 08 июля 2011

В идеале, вы должны попробовать использовать jQuery Mobile структуру страницы с вашим собственным CSS и JavaScript для немобильных устройств.

Вы можете легко обнаружить браузер пользователя иусловный скрипт включает в себя html5 [шаблон]: 3 

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {

Основные моменты, которые следует учитывать при нацеливании на пользователей iPhone:

  • убедитесь, что нет жизненно важной вспышкиобъекты на странице, поскольку это не поддерживается многими мобильными браузерами (пока?)
  • соответствующий размер экрана (с использованием метатега viewport)
  • , учитывая, что курсоров мыши нет, то есть нетпри наведении / двойном щелчке доступны любые жесты перетаскивания мышью на сенсорных устройствах.
  • помните, что все всплывающие окна открыты в новых вкладках и не будут отображаться одновременно с главным окном, используйте модальный javascriptв качестве альтернативы div
  • протестируйте все ваши javascript и css, чтобы убедиться, что все выглядит и работает одинаково (Safari требует префикса -webkit- для новейших свойств CSS)
  • создать иконку главного экрана для вашего веб-сайта (неплохо бы иметь)

большинство из этих вещей покрыты здесь

взгляните на Safari Dev Center для учебных пособий / видео / кодирования, как и т.д.

2 голосов
/ 08 июля 2011

Есть несколько вариантов, но это мой любимый:

Поставляется с API на нескольких языках

1 голос
/ 08 июля 2011

Вам вообще не нужен jQuery, если вы не хотите его использовать.Мы неНе то чтобы в этом было что-то не так.

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

0 голосов
/ 08 июля 2011

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

http://jquerymobile.com/

...