Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Desarrollar páginas web y aplicaciones para dispositivos móviles presenta diferentes desafíos en comparación
hasta desarrollar una página web
con navegadores web para computadoras. Las siguientes prácticas pueden ayudarte a proporcionar la
la aplicación web más eficaz para Android y otros dispositivos móviles.
Redirecciona los dispositivos móviles a una versión exclusiva para dispositivos móviles del sitio web. Existen varias
maneras de hacerlo con redireccionamientos del servidor. Un método común es "husmear" el
Es la cadena usuario-agente que proporciona el navegador web. Para determinar
si desea publicar una versión para celulares de su sitio, busque la opción "para dispositivos móviles" en el usuario-agente.
Use HTML5.
para dispositivos móviles. HTML5 es el lenguaje de marcación más común que se usa en sitios web móviles.
Este estándar fomenta el desarrollo mobile first para garantizar que los sitios web funcionen en una variedad de
dispositivos. A diferencia de los lenguajes web anteriores, HTML5 utiliza <DOCTYPE> y
Declaraciones de charset:
<!DOCTYPEhtml>
...
<metacharset="UTF-8">
Usa los metadatos del viewport para cambiar el tamaño de tu página web correctamente. En tu documento
<head>, proporciona metadatos que especifican cómo deseas que el viewport del navegador
renderizar tu página web. Por ejemplo, los metadatos de tu viewport pueden especificar la altura y el ancho de la
viewport del navegador, escala inicial de la página y densidad de la pantalla objetivo.
En el siguiente ejemplo, se muestra cómo configurar los metadatos del viewport:
Usa un diseño lineal vertical. Evita la necesidad de que el usuario se desplace hacia la izquierda y la derecha mientras
navegar por tu página. El desplazamiento hacia arriba y hacia abajo es más fácil para el usuario y simplifica tu página.
Establece la altura y el ancho del diseño en match_parent. Configurando tu
La altura y el ancho del objeto WebView en
match_parent se asegura de que las vistas de tu app tengan el tamaño correcto. No recomendamos establecer
la altura a wrap_content porque el tamaño es incorrecto. De manera similar, configurar la
no se admite el ancho de diseño a wrap_content, por lo que tu WebView
usa el ancho del elemento superior. Debido a este comportamiento, también debes asegurarte de que ninguna
de los objetos de diseño superiores de tu objeto WebView tienen la altura y el ancho establecidos en
wrap_content
Evita varias solicitudes de archivos. Porque los dispositivos móviles generalmente tienen una velocidad de conexión
más lento que las computadoras de escritorio, haz que tu página se cargue lo más rápido posible. Una forma de acelerarlo
Evita cargar archivos adicionales, como hojas de estilo y archivos de secuencias de comandos, en <head>.
Además, ten en cuenta
realizar análisis de dispositivos móviles
PageSpeed Insights de Google para obtener sugerencias de optimización detalladas específicas para tu app
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-07-27 (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)"]]
