Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android ignora la escala máxima al usar meta-tag de viewport de ancho fijo

Tengo una página web de ancho fijo (640 píxeles de ancho). Me gustaría que esta página se redujera al ancho de un dispositivo móvil. Sin embargo, si el ancho nativo del dispositivo es mayor de 640 píxeles, no quiero que se estire. Parece bastante simple:

<meta name="viewport" content="width=640, maximum-scale=1.0" /> 

Esto funciona como se espera en iPad / iPhone. Sin embargo, en una tableta Android (por ejemplo, en modo horizontal), el contenido se amplía para ajustarse a la pantalla. En otras palabras, Android simplemente ignora la escala máxima = 1. Puede ver una página de ejemplo con el problema aquí . En aras de la integridad aquí está la fuente:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test Viewport</title> <meta name="viewport" content="width=640, maximum-scale=1.0" /> <style> div.bar { position: absolute; width: 636px; height: 50px; background-color: yellow; border: 2px solid black; left: 50%; margin-left: -320px; } </style> </head> <body> <div class="bar"> </div> </body> </html> 

He estado haciendo mucha investigación y experimentación con la meta-etiqueta del viewport. He leído casi todo sobre el tema, pero no he visto este tema aparentemente básico mencionado.

Dos notas:

  • Esta no es una cuestión de densidad objetivo

  • Ajustar el ancho de la ventana de visualización al ancho del dispositivo no es útil en este caso porque el ancho del contenido es fijo y mayor que (por ejemplo) el ancho del dispositivo de retrato de un teléfono. Si configuro width = device-width, la página no se reducirá automáticamente para que se ajuste al teléfono.

Muchas gracias.

  • ¿Qué es un Android DecorView?
  • Activity.addContentView (Vista) == ViewGroup.addContentView (Ver)?
  • Android: ¿qué hace requestWindowFeature (Window.FEATURE_INDETERMINATE_PROGRESS)?
  • ¿Cómo puedo crear una ventana pull-down / up en la GUI de Android?
  • ¿Usa Android un sistema de ventana personalizado?
  • Disable Window resize Animation en Android
  • 2 Solutions collect form web for “Android ignora la escala máxima al usar meta-tag de viewport de ancho fijo”

    Después de golpear más la cabeza contra una mesa, he encontrado una solución:

    Lamentablemente, parece que iOS y Android simplemente se comportan de manera diferente (Android es muy claramente no hacer lo que dice la especificación haciendo caso omiso de la escala máxima). La solución es especializarse basándose en la resolución mediante JavaScript:

    • Si el ancho de pantalla (ver nota a continuación) es mayor o igual al ancho de página fijo (640 en mi ejemplo), establezca el ancho de contenido de la metaetiqueta de viewport en el ancho de pantalla

    • Por otro lado, establezca el ancho del contenido de la meta-etiqueta de la ventana gráfica en el ancho de página fijo (640)

    Presto. Lame que requiere la especialización de JavaScript, pero tal es la vida.

    Tenga en cuenta que el screen.width JavaScript en iPad / iPhone es incorrecto si el dispositivo es el modo de paisaje (el iPad todavía reporta el ancho de retrato en lugar de la anchura del paisaje, a diferencia de Android que lo hace bien en este caso!). Por lo tanto, deberá comprobar window.orientation en iPad / iPhone y usar screen.height en lugar de screen.width si está en landscape.

    Prefiero usar

     width=640, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi 

    En lugar de sólo la propiedad de escala Max … La propiedad target-densityDpi si Android específico, tal vez puede solucionar su problema.

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.