estilo incorrecto a menos que se aplique el color de fondo

Estoy desarrollando un sitio para móviles, por lo que estoy usando CSS para hacer las cosas lo más líquido posible.

Tengo una extraña dificultad. Dentro de un contenedor div, tengo un  que se supone que llena el ancho de la div. He intentado width:auto , width:100% … nada parece funcionar en el navegador de Android. He aquí algunos ejemplos:

IOS (Correcto):

Orientación correcta

Android (Incorrecto, no se está extendiendo completamente, ha añadido más texto que la versión de iOS para que pueda ver lo que estoy hablando):

Introduzca aquí la descripción de la imagen

Ambas capturas de pantalla tomadas de emuladores respectivos.

Esto es lo extraño, sin embargo … Si le doy a la clase aplicada a estos  color de fondo, el navegador de Android permite entonces que el  llene todo el ancho de su div principal (parece idéntico a iOS) . La parte realmente extraña, sin embargo, es que si hago el color de fondo transparente (pensé que lo había engañado lol), entonces vuelve a hacer como se muestra en el ejemplo.

Por lo tanto, tengo un  sólo correctamente haciendo referencia a su CSS si tiene un color de fondo aplicado … estoy estupidamente con vistas a algo, o es este un problema con el navegador de Android? ¿Alguna idea de cómo solucionarlo?

Gracias por tu tiempo.

Aunque puede que no sea la mejor solución, acabo de hacer un png transparente "invisible" y establecerlo como el fondo de  , y eso arregló el problema … si se puede llamar fijación. 🙂 Tengo que asumir que es algún tipo de error en el navegador de Android, como he intentado esto en todos los navegadores, equipos de escritorio y móviles.

Es el comportamiento previsto de los teléfonos Android. Aumentará la legibilidad del texto de copia, ya que no se ve obligado a desplazarse hacia los lados si pellizca el zoom de la página.

Se puede administrar en su propio teléfono, tal vez en la configuración del navegador, pero esa no es la solución que desea.

Puede ser "arreglado" por la solución de aplicar una imagen de fondo al elemento que desea.

Esto se puede hacer con un url de datos codificados en base64:

 background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

En la configuración de su navegador móvil, busque algo llamado "Ajustar automáticamente las páginas" y deshabilítelo. Esta configuración (en Android) está activada de forma predeterminada. Apágalo y su texto fluirá como debería.

El div o cualquier elemento por encima de este

Podría ser el problema.

Si da anchura fija al elemento p, ¿funciona bien?