Веб-разработка под мобильные устройства

Данная страница содержит обзор некоторых из основных методов, необходимых чтобы разрабатывать веб-сайты, которые корректно работают на мобильных устройствах. Если вы ищите информацию в проекте Mozilla's Firefox OS project, смотрите страницу Firefox OS. Возможно вас также интересует подробная информация о  Firefox для Android.

Мы разделили информацию на две секции, разработка под мобильные устройства и кросс-браузерная совместимость. Смотрите также руководство от Jason Grlicky по дружелюбность-к-мобильным для web разработчиков.

Разработка под мобильные устройства

Мобильные устройства имеют довольно разные аппаратные характеристики в сравнении с десктопами или ноутбуками. Их экраны обычно меньше, естественно, но к тому же они обычно автоматически переключаются между режимами портретной и горизонтальной ориентации в момент когда пользователь поворачивает устройство. Они обычно используют сенсорный экран для пользовательского ввода. APIs наподобие геолокации или ориентации которые либо не поддерживаются на десктопах, либо для них не так уж и нужны, такие API предоставляют мобильным пользователям новые способы взаимодействия с вашим сайтом.

Работа с  маленькими экранами

Адаптивный веб-дизайн - это термин, означающий набор методов, который позволит вашему веб-сайту адаптировать разметку под среду, в которой он просматривается — наиболее вероятно, под изменяющиеся размеры и ориентацию. Основными методами являются:

  • обтекаемая разметка CSS, позволяющая плавно адаптировать страницу под изменяющиеся размеры окна
  • использование медиа-запросов чтобы подключать стили по условию, соответственно ширине и высоте экрана.

Meta-тег viewport инструктирует браузер отображать ваш сайт в подходящем масштабе на устройстве пользователя.

Работа с сенсорными экранами

Для использования сенсорного экрана вам понадобится работать с DOM Touch events. Вы не сможете использовать CSS :hover псевдо класс, и при проектировании интерактивных элементов (к примеру, кнопок) нужно будет учитывать тот факт, что пальцы толще, чем указатели мыши. Смотрите данную статью в Проектирование под сенсорные экраны.

Вы можете использовать -moz-touch-enabled медиа-запрос чтобы загружать другие CSS на сенсоро-доступные устройствах.

Оптимизация изображений

Чтобы помочь пользователям, чьи устройства имеют медленный или дорогой доступ к сети, вы можете оптимизировать изображения, загружая изображения под соответствующие размеры и разрешение экрана устройства. Это делается в CSS указывая в медиа-запросах height, width, и pixel ratio.

Также вы можете использовать свойства CSS чтобы применить визуальные эффекты типа gradients и shadows без использования изображений.

API для мобильных устройств

Наконец, вы можете воспользоваться преимуществом новых возможностей, предлагаемых мобильными устройствами, такие как orientation и geolocation.

Кросс-браузерная верстка

Пишите кросс-браузерный код

Чтобы создавать веб-сайты, которые будут работать приемлемо во всех мобильных браузерах:

  • Старайтесь избегать использования стилей, специфических для браузеров, таких как свойства CSS с вендорными префиксами.
  • Если всё же вам необходимо ими воспользоваться, убедитесь что другие браузеры применяют свои собственные версии этих свойств, и укажите их.
  • Для браузеров, которые не поддерживают эти свойства, обеспечьте приемлемый упрощенный вариант.

Например, если вы указываете градиент в качестве фона для какого-либо текста, используя стиль с вендорным префиксом типа -webkit-linear-gradient, правильнее включить другие варианты с вендор-специфичекими префиксами для свойства linear-gradient. Если вы этого не делаете, по крайней мере удостоверьтесь, что фон, отображаемый по умолчанию, контрастирует с текстом: тогда страница, по крайней мере, будет корректно отображаться в браузере, который не воспринимает ваше linear-gradient правило.

Смотрите этот список Gecko-специфических свойств, и этот список WebKit-специфических свойств, и таблицу вендор-специфических свойств от Peter Beverloo.

Использование инструментов, наподобие CSS Lint может помочь обнаружить подобные проблемы в коде, а такие препроцессоры, как SASS и LESS могут помочь вам создавать кросс-браузерный код.

Позаботьтесь об анализе user agent

Для веб-сайтов предпочтительнее обнаружить свойства, специфичные для устройства, такие как размеры экрана и наличие сенсорного экрана, используя описанные выше способы, и соответсвенно адаптироваться. Но иногда это непрактично, и веб-сайты прибегают к синтаксическому разбору строки user agent браузера чтобы различить десктопы, планшеты, и смартфоны, чтобы отправлять разный контент под каждый тип устройств.

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

Проверяйте на многих браузерах

Проверяйте ваш веб-сайт на многих браузерах. Это означает тестирование на многих платформах — по крайней мере на iOS и Android.