Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Данная страница содержит обзор некоторых из основных методов, необходимых чтобы разрабатывать веб-сайты, которые корректно работают на мобильных устройствах. Если вы ищите информацию в проекте 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.
- тестируйте под мобильный Safari на iPhone используя iOS симулятор
- тестируйте под Opera и Firefox используя Android SDK. Смотрите эти дополнительные интсрукции для запуска Firefox под Android используя эмулятор Android.