Мобильный Интернет - что нужно учитывать? - PullRequest
Новая
       5

Мобильный Интернет - что нужно учитывать?

4 голосов
/ 28 мая 2011

Итак, я создаю свою первую веб-страницу для мобильных браузеров.Что нужно учитывать?

  1. Как правильно настроить разрешение для разных устройств (Blackberry, iPhone, iPad и т. Д.)?Есть ли распространенный метод, который используют люди?Какой-то каркас?

  2. Как запретить масштабирование (на большинстве телефонов с сенсорным экраном можно увеличивать масштаб, зажимая)?

  3. ЧтоЕсть еще какие-то вещи, чтобы иметь в виду?

Ответы [ 2 ]

5 голосов
/ 28 мая 2011

Существует множество хороших практик для подражания. Вот некоторые из них:

  1. делает контент короче и легче для чтения. Люди могут только много прокручивать и читать так много на меньшем экране.
  2. разработайте весь ваш контент в одном столбце. Сделайте width гибким (100% или близко к нему), чтобы он расширялся, чтобы заполнить экран. Не заставляйте людей горизонтально прокручивать страницу.
  3. не используйте много а) скриптов, б) таблиц стилей CSS, в) изображений. Они требуют много загрузки и увеличат время загрузки страницы и стоимость для пользователя (так как большинство людей на мобильных устройствах платят за КБ для просмотра веб-страниц). Консолидация / gzip ваши файлы.
  4. в вашем css, добавьте дополнительный line-height для удобства чтения.
  5. в вашем css, добавьте дополнительные letter-spacing между номерами в телефонных номерах, для удобства чтения.
  6. сохраните ссылку на полный сайт для тех, кто хочет получить полный контент.
  7. включает ссылку «вверх-вниз» внизу страницы, чтобы пользователям не приходилось полностью прокручивать назад.
  8. добавить отступ к a hrefs, чтобы было легче щелкнуть / коснуться ссылки.
  9. используйте HTML5 form types, чтобы современные браузеры использовали соответствующие клавиатуры ... http://diveintohtml5.ep.io/forms.html
3 голосов
/ 28 мая 2011

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

Если вы знаете, что ваши страницы будут хорошо уменьшены до размеров экрана мобильного устройства, дайте браузеру подсказку, что онможет показывать страницы 1: 1 без масштабирования по умолчанию.Включите в свой <head>: 

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Я бы настоятельно рекомендовал , а не , пытаясь отключить масштабирование (user-scalable=no), поскольку это полезная функция, которую вы ничего не получаете, блокируя.

...