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:

  • Buscando un método multiplataforma para gráficos básicos 2D / 3D para iOS y Android
  • ¿Debe cada actividad tener un diseño?
  • ¿Los widgets de aplicaciones de Android (para la pantalla de inicio) permiten gestos?
  • Proyecto de ejemplo de chat de Android de Facebook
  • ¿Cómo mostrar un diseño encima del otro programmatically en mi caso?
  • ¿Es posible extender los tokens de Facebook con extendAccessTokenIfNeeded en una aplicación para Android?
  •  <!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.

  • Error de facturación de la aplicación en Android Debes iniciar sesión en tu cuenta de Google
  • Cómo agregar el "Pack de iconos de la barra de acciones" a Android Studio
  • Extrañas excepciones en android 4.0 con eclipse
  • Cómo crear una aplicación de Android con HTML 5
  • Eventos de clics no registrados
  • Cómo combinar dos archivos mp3 en uno (combinar / unir)
  • 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.