Рекомендации для веб-приложений

Разработка веб-страниц и приложений для мобильных устройств представляет собой другие задачи по сравнению с разработкой веб-страниц для настольных веб-браузеров. Следующие рекомендации помогут вам создать наиболее эффективное веб-приложение для Android и других мобильных устройств.

  1. Перенаправляйте мобильные устройства на специальную мобильную версию вашего сайта. Есть несколько способов сделать это с помощью перенаправления на стороне сервера. Одним из распространенных методов является «обнюхивание» строки User Agent, предоставленной веб-браузером. Чтобы определить, следует ли обслуживать мобильную версию вашего сайта, найдите строку «mobile» в пользовательском агенте.
  2. Используйте HTML5 для мобильных устройств. HTML5 — наиболее распространенный язык разметки, используемый для мобильных веб-сайтов. Этот стандарт поощряет разработку, ориентированную на мобильные устройства, чтобы обеспечить работу веб-сайтов на различных устройствах. В отличие от предыдущих веб-языков, HTML5 использует более простые объявления <DOCTYPE> и charset : 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Используйте метаданные области просмотра, чтобы правильно изменить размер веб-страницы. В вашем документе <head> укажите метаданные, которые определяют, как вы хотите, чтобы область просмотра браузера отображала вашу веб-страницу. Например, метаданные области просмотра могут указывать высоту и ширину области просмотра браузера, начальный масштаб страницы и целевую плотность экрана.

    В следующем примере показано, как установить метаданные области просмотра:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Дополнительные сведения о том, как использовать метаданные области просмотра для устройств под управлением Android, см. в разделе Поддержка различных экранов в веб-приложениях .

  4. Используйте вертикальную линейную компоновку. Избегайте необходимости прокрутки пользователя влево и вправо при навигации по вашей странице. Прокрутка вверх и вниз проще для пользователя и упрощает вашу страницу.
  5. Установите высоту и ширину макета match_parent . Установка высоты и ширины объекта WebView на match_parent гарантирует правильный размер представлений вашего приложения. Мы не рекомендуем устанавливать высоту wrap_content поскольку это приводит к неправильному размеру. Аналогичным образом, установка ширины макета на wrap_content не поддерживается и приводит к тому, что ваш WebView вместо этого использует ширину своего родительского элемента. Из-за такого поведения также важно убедиться, что ни один из родительских объектов макета вашего объекта WebView не имеет высоты и ширины, заданных как wrap_content .
  6. Избегайте множественных запросов файлов. Поскольку скорость соединения на мобильных устройствах обычно ниже, чем на настольных компьютерах, постарайтесь загрузить страницу как можно быстрее. Один из способов ускорить его — избегать загрузки дополнительных файлов, таких как таблицы стилей и файлы сценариев, в <head> . Кроме того, рассмотрите возможность проведения мобильного анализа с помощью Google PageSpeed ​​Insights для получения подробных рекомендаций по оптимизации, специфичных для вашего приложения.

Дополнительные ресурсы