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

Estoy trabajando en un webApp que debe cambiar el tamaño de cualquier tamaño de pantalla que un dispositivo podría tener. En iOS y versiones android más antiguas, la etiqueta de ventana de visualización funciona bien. La imagen de 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 es aproximadamente 20px espacio y no sé por qué hace esto. Mi etiqueta de viewport se ve así:

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

No importa lo que cambio sobre la etiqueta, el espacio siempre está ahí y el contenido no encaja en 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 encaja perfectamente (no verá nada amarillo = cuerpo) y el ancho del documento será de 320 píxeles. En el Galaxy Nexus verá espacio amarillo y el ancho del documento es 360px (que es exactamente la mitad de la resolución de pantalla). ¡Esto debe ser 320px también! ¿Tienes este problema también y hay una 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 gran tamaño de pantalla, supongo.

El mismo problema aquí (Galaxy Nexus – Android 4.0.2), estoy hablando de la página web regular en el navegador predeterminado

Ajustar la escala inicial de la ventana de visualización menos de 1 (alejar) parece ser ignorada por el navegador . Los valores superiores a 1 (zoom-in) funcionan bien.

Hay configuraciones en el navegador (settings-> advanced) donde puedes cambiar cosas:

  1. Zoom predeterminado: diferencia, pero no soluciona el problema
  2. Ajustar automáticamente las páginas – en mi caso no hace ninguna diferencia

Todo parece funcionar perfectamente en el navegador Chrome (beta por el momento), pero no es el navegador predeterminado para ICS / Galaxy Nexus.

UPDATE (solución):

La configuración de la ventana de meta "width = device-width" falla en Galaxy Nexus.
Establecer la ventana de visualización "width = 1280" funciona muy bien (1280px es el ancho de la pantalla del nexo de galaxia).

Tenga en cuenta que la configuración "width = 1280, user-scalable = no" lo rompe de nuevo (puede alejar incluso si hay user-scalable = no) 🙁

Me encontré con algo similar en un Galaxy Tab 2. Al configurar sus WebSettings para el applcation, pruebe a configurar webViewSettings.setUseWideViewPort (true); Esto obligará a Android a considerar la metaetiqueta de la ventana de visualización. Se estaba ignorando en el caso de la Galaxy Tab 2 para mi aplicación y todo en el visor estaba dibujando incorrectamente hasta que cambié esto.

Terminé discutiendo con este problema hoy. Mi problema era un poco más complejo, porque tenía que tratar con una hoja de estilos de WordPress (de otro tema), además de la base CSS. Chrome funcionó perfectamente en mi teléfono y tablet y el navegador de valores funcionó bien en la tableta, también. Sin embargo, el navegador de valores se mantuvo alejando y me mostró la vista de escritorio. No había márgenes en ningún lado, que era el comportamiento correcto, pero el navegador debería haber eliminado los flotadores de mi barra lateral y divs de contenido y ampliado al contenido principal (estoy usando consultas @media). Por extraño que suene, en realidad lo arreglé fijando primero la configuración de Zoom en Lejano, refrescante y luego restableciendo Zoom a Medio y refrescándose.

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

  • En Android, ¿qué son las inserciones de ventana?
  • La actividad ha filtrado la ventana com.android.internal.policy.impl.PhoneWindow$DecorView@46368a28 que fue agregada originalmente aquí
  • Pregunta Javascript - ¿qué es "ventana"?
  • Atributo windowIsFloating en el tema de Android
  • Diálogo personalizado de Android como 'Contacto rápido'
  • Cómo deshabilitar el zoom / escalado de la página web en Android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.