¿Por qué la etiqueta viewport en el Galaxy Nexus/Android 4 no funciona?

Question

Estoy trabajando en una aplicación web que debería redimensionarse a cualquier tamaño de pantalla que un dispositivo pueda tener. En iOS y en versiones anteriores de Android, la etiqueta de ventana gráfica funciona bien. La imagen en la pantalla siempre se redimensiona para ajustarse a la pantalla.
(Como se describe aquí: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
En el Galaxy Nexus (Android 4.0) no funcionará. En el lado izquierdo y derecho hay aproximadamente 20 px de espacio y no sé por qué lo hace. Mi etiqueta de la ventana gráfica se ve así:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 

No importa lo que yo cambio sobre la etiqueta, el espacio siempre está ahí y el contenido no se ajusta a la pantalla. He hecho una página de muestra para mostrarle el efecto: http://easyeve.w3y.de/link/index.html
Si abre este enlace en un iPhone, el contenido se ajusta perfectamente (no verá nada amarillo = cuerpo) y el ancho del documento es 320px. En el Galaxy Nexus, verá un espacio amarillo y el ancho del documento es 360px (que es exactamente la mitad de la resolución de la pantalla). ¡Esto debería ser 320px también! ¿También tiene este problema y hay alguna manera de solucionarlo?

Actualización: He notado el mismo problema en Galaxy Note/Android 2.3.6 Por lo tanto, no es un problema de Android 4. Tiene que ver con el tamaño de la pantalla grande supongo ..

Answer 1

La misma cuestión aquí (Galaxy Nexus - Android 4.0.2), estoy hablando de página web normal en el navegador por defecto

Ajuste viewport meta escala inicial inferior a 1 (alejar) parece ser ignorado por el navegador. Los valores más altos que 1 (acercar) funcionan bien.

Hay configuraciones en el navegador (configuración-> avanzado) donde se pueden cambiar las cosas:

1. Zoom predeterminado - que hace la diferencia, pero no soluciona el problema
páginas
2. Ajuste automático - en mi caso no hay diferencia

Todo parece funcionar simplemente perfecto en el navegador Chrome (beta por el momento), pero eso es no navegador por defecto para ICS/Galaxy Nexus.

UPDATE (solución):

Configuración meta ventana gráfica "width = dispositivo de anchura" falla en Galaxy Nexus.
Configuración viewport "width = 1280" funciona simplemente bien (1280px es el ancho de la pantalla de Galaxy Nexus).

Tenga en cuenta que el ajuste "width = 1.280, el usuario escalable = no" rompe de nuevo (se puede alejar la imagen, incluso si no es escalable de usuario = no) :(

Answer 2

terminé disputas con este problema hoy en día Mi problema era un poco más complejo, porque tuve que lidiar con una hoja de estilos de Wordpress (de otro tema) además de la base CSS. Chrome funcionaba perfectamente en mi teléfono y tableta y el navegador de valores funcionaba bien en la tableta, también Sin embargo, el navegador de valores siguió alejándose y mostrándome la vista de escritorio.No había márgenes en ninguno de los lados, que era el comportamiento correcto, pero el navegador debería haber eliminado los flotadores de mi divisa y divs de contenido y ampliar el contenido principal (estoy usando @media consultas). Por extraño que suene, lo solucioné primero configurando la configuración de Zoom en Lejos, refrescando y luego restableciendo el Zoom en Medio y refrescando.

Debo señalar que cuando miré en el HTML y CSS de su página, noté que establecía un ancho de píxel específico para su página div. Estoy bastante seguro de que necesitas usar porcentajes para el ancho en su lugar. Por ejemplo, mi contenido centrado div tiene margin: 0 auto;, min-width:320px;, max-width:900px; y width:100%;.

Answer 3

Me encontré con algo similar en una Galaxy Tab 2. Cuando configure su WebSettings para la aplicación, intente configurar webViewSettings.setUseWideViewPort (true); Esto obligará a Android a considerar la metaetiqueta de la ventana gráfica. Estaba siendo ignorado en el caso del Galaxy Tab 2 para mi aplicación y todo en la ventana gráfica estaba dibujando incorrectamente hasta que cambié esto.