Оптимизируйте свои подборки
Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Разработка веб-страниц и приложений для мобильных устройств представляет собой другие задачи по сравнению с разработкой веб-страниц для настольных веб-браузеров. Следующие рекомендации помогут вам создать наиболее эффективное веб-приложение для Android и других мобильных устройств.
Перенаправляйте мобильные устройства на специальную мобильную версию вашего сайта. Есть несколько способов сделать это с помощью перенаправления на стороне сервера. Одним из распространенных методов является «обнюхивание» строки User Agent, предоставленной веб-браузером. Чтобы определить, следует ли обслуживать мобильную версию вашего сайта, найдите строку «mobile» в пользовательском агенте.
Используйте HTML5 для мобильных устройств. HTML5 — наиболее распространенный язык разметки, используемый для мобильных веб-сайтов. Этот стандарт поощряет разработку, ориентированную на мобильные устройства, чтобы обеспечить работу веб-сайтов на различных устройствах. В отличие от предыдущих веб-языков, HTML5 использует более простые объявления <DOCTYPE> и charset :
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
Используйте метаданные области просмотра, чтобы правильно изменить размер веб-страницы. В вашем документе <head> укажите метаданные, которые определяют, как вы хотите, чтобы область просмотра браузера отображала вашу веб-страницу. Например, метаданные области просмотра могут указывать высоту и ширину области просмотра браузера, начальный масштаб страницы и целевую плотность экрана.
В следующем примере показано, как установить метаданные области просмотра:
Используйте вертикальную линейную компоновку. Избегайте необходимости прокрутки пользователя влево и вправо при навигации по вашей странице. Прокрутка вверх и вниз проще для пользователя и упрощает вашу страницу.
Установите высоту и ширину макета match_parent . Установка высоты и ширины объекта WebView на match_parent гарантирует правильный размер представлений вашего приложения. Мы не рекомендуем устанавливать высоту wrap_content поскольку это приводит к неправильному размеру. Аналогичным образом, установка ширины макета на wrap_content не поддерживается и приводит к тому, что ваш WebView вместо этого использует ширину своего родительского элемента. Из-за такого поведения также важно убедиться, что ни один из родительских объектов макета вашего объекта WebView не имеет высоты и ширины, заданных как wrap_content .
Избегайте множественных запросов файлов. Поскольку скорость соединения на мобильных устройствах обычно ниже, чем на настольных компьютерах, постарайтесь загрузить страницу как можно быстрее. Один из способов ускорить его — избегать загрузки дополнительных файлов, таких как таблицы стилей и файлы сценариев, в <head> . Кроме того, рассмотрите возможность проведения мобильного анализа с помощью Google PageSpeed Insights для получения подробных рекомендаций по оптимизации, специфичных для вашего приложения.
Контент и образцы кода на этой странице предоставлены по лицензиям. Java и OpenJDK – это зарегистрированные товарные знаки корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2025-07-29 UTC.
[[["Прост для понимания","easyToUnderstand","thumb-up"],["Помог мне решить мою проблему","solvedMyProblem","thumb-up"],["Другое","otherUp","thumb-up"]],[["Отсутствует нужная мне информация","missingTheInformationINeed","thumb-down"],["Слишком сложен/слишком много шагов","tooComplicatedTooManySteps","thumb-down"],["Устарел","outOfDate","thumb-down"],["Проблема с переводом текста","translationIssue","thumb-down"],["Проблемы образцов/кода","samplesCodeIssue","thumb-down"],["Другое","otherDown","thumb-down"]],["Последнее обновление: 2025-07-29 UTC."],[],[],null,["# Best practices for web apps\n\nDeveloping web pages and applications for mobile devices presents different challenges compared\nto developing a web page for desktop web browsers. The following practices can help you provide the\nmost effective web application for Android and other mobile devices.\n\n1. **Redirect mobile devices to a dedicated mobile version of your website.** There are several ways to do this using server-side redirects. One common method is to \"sniff\" the User Agent string provided by the web browser. To determine whether to serve a mobile version of your site, look for the \"mobile\" string in the User Agent.\n| **Note:** Large-screen Android-powered devices that are served full-size websites---such as tablets---don't include the \"mobile\" string in the User Agent, while the rest of the User Agent string is mostly the same. As such, it's important you deliver the mobile version of your website based on whether the \"mobile\" string exists in the User Agent.\n2. **Use [HTML5](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5)\n for mobile devices.** HTML5 is the most common markup language used for mobile websites. This standard encourages mobile-first development to help ensure that websites work on a variety of devices. Unlike previous web languages, HTML5 uses simpler `\u003cDOCTYPE\u003e` and `charset` declarations: \n\n ```xml\n \u003c!DOCTYPE html\u003e\n ...\n \u003cmeta charset=\"UTF-8\"\u003e\n ```\n3. **Use viewport metadata to properly resize your web page.** In your document `\u003chead\u003e`, provide metadata that specifies how you want the browser's viewport to render your web page. For example, your viewport metadata can specify the height and width for the browser's viewport, the initial page scale, and the target screen density.\n\n The following example shows how to set viewport metadata: \n\n ```xml\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"\u003e\n ```\n\n For more information about how to use viewport metadata for Android-powered devices, read [Support different screens in web apps](/guide/webapps/targeting).\n4. **Use a vertical linear layout.** Avoid the need for the user to scroll left and right while navigating your page. Scrolling up and down is easier for the user and makes your page simpler.\n5. **Set the layout height and width to `match_parent`.** Setting your [`WebView`](/reference/android/webkit/WebView) object's height and width to `match_parent` makes sure your app's views are sized correctly. We discourage setting the height to `wrap_content` because it results in incorrect sizing. Similarly, setting the layout width to `wrap_content` isn't supported and causes your `WebView` to use the width of its parent instead. Because of this behavior, it's also important to make sure none of your `WebView` object's parent layout objects have their height and width set to `wrap_content`.\n6. **Avoid multiple file requests.** Because mobile devices typically have a connection speed slower than desktop computers, make your page load as fast as possible. One way to speed it up is to avoid loading extra files such as stylesheets and script files in the `\u003chead\u003e`. Also, consider [performing mobile analysis with\n Google's PageSpeed Insights](https://developers.google.com/speed/docs/insights/v5/get-started) for detailed optimization suggestions specific to your app.\n\nAdditional resources\n--------------------\n\n- [Pixel-Perfect UI in the WebView](https://developers.google.com/chrome/mobile/docs/webview/pixelperfect)\n- [Learn Responsive Design](http://www.html5rocks.com/en/mobile/responsivedesign/)\n- [High DPI images for variable pixel densities](http://www.html5rocks.com/en/mobile/high-dpi/)\n- [Mobile Web Best Practices](http://www.w3.org/TR/mobile-bp/)\n- [Make the Web Faster](https://developers.google.com/speed/overview)"]]
