Разработка веб-страниц и приложений для мобильных устройств представляет собой другие задачи по сравнению с разработкой веб-страниц для настольных веб-браузеров. Следующие рекомендации помогут вам создать наиболее эффективное веб-приложение для Android и других мобильных устройств.
- Перенаправляйте мобильные устройства на специальную мобильную версию вашего сайта. Есть несколько способов сделать это с помощью перенаправления на стороне сервера. Одним из распространенных методов является «обнюхивание» строки User Agent, предоставленной веб-браузером. Чтобы определить, следует ли обслуживать мобильную версию вашего сайта, найдите строку «mobile» в пользовательском агенте.
- Используйте HTML5 для мобильных устройств. HTML5 — наиболее распространенный язык разметки, используемый для мобильных веб-сайтов. Этот стандарт поощряет разработку, ориентированную на мобильные устройства, чтобы обеспечить работу веб-сайтов на различных устройствах. В отличие от предыдущих веб-языков, HTML5 использует более простые объявления
<DOCTYPE>
иcharset
:<!DOCTYPE html> ... <meta charset="UTF-8">
- Используйте метаданные области просмотра, чтобы правильно изменить размер веб-страницы. В вашем документе
<head>
укажите метаданные, которые определяют, как вы хотите, чтобы область просмотра браузера отображала вашу веб-страницу. Например, метаданные области просмотра могут указывать высоту и ширину области просмотра браузера, начальный масштаб страницы и целевую плотность экрана.В следующем примере показано, как установить метаданные области просмотра:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Дополнительные сведения о том, как использовать метаданные области просмотра для устройств под управлением Android, см. в разделе Поддержка различных экранов в веб-приложениях .
- Используйте вертикальную линейную компоновку. Избегайте необходимости прокрутки пользователя влево и вправо при навигации по вашей странице. Прокрутка вверх и вниз проще для пользователя и упрощает вашу страницу.
- Установите высоту и ширину макета
match_parent
. Установка высоты и ширины объектаWebView
наmatch_parent
гарантирует правильный размер представлений вашего приложения. Мы не рекомендуем устанавливать высотуwrap_content
поскольку это приводит к неправильному размеру. Аналогичным образом, установка ширины макета наwrap_content
не поддерживается и приводит к тому, что вашWebView
вместо этого использует ширину своего родительского элемента. Из-за такого поведения также важно убедиться, что ни один из родительских объектов макета вашего объектаWebView
не имеет высоты и ширины, заданных какwrap_content
. - Избегайте множественных запросов файлов. Поскольку скорость соединения на мобильных устройствах обычно ниже, чем на настольных компьютерах, постарайтесь загрузить страницу как можно быстрее. Один из способов ускорить его — избегать загрузки дополнительных файлов, таких как таблицы стилей и файлы сценариев, в
<head>
. Кроме того, рассмотрите возможность проведения мобильного анализа с помощью Google PageSpeed Insights для получения подробных рекомендаций по оптимизации, специфичных для вашего приложения.
Дополнительные ресурсы
- Пиксельный пользовательский интерфейс в WebView
- Изучите адаптивный дизайн
- Изображения с высоким разрешением и переменной плотностью пикселей
- Лучшие практики мобильного Интернета
- Сделайте Интернет быстрее