Qué haría que un elemento <p> no abarcara todo el ancho en el navegador de Android

Me han pedido que eche un vistazo a un extraño problema y no puedo entenderlo. Básicamente

Los elementos típicamente abarcan toda la anchura, ya que son elementos de bloque, pero en ciertas páginas no parecen querer hacerlo. He probado esto en el ICS por defecto de Android y Dolphin y está jugando en ambos. Esta pregunta resume el problema, sólo la respuesta no funciona: ¿Por qué el navegador de Android no abarca este párrafo en toda la anchura del navegador?

ACTUALIZACIÓN: ¿Una solución extraña? Si configuro el siguiente CSS p {background: #fff; } Resuelve el problema, lo que podría causar algunos un extraño problema. El problema es que necesito que los antecedentes sean transparentes.

Es un hack, pero mi solución fue establecer fondo: url (''); En mis etiquetas de párrafo y título. Necesito que mi fondo sea transparente, así que no puedo establecer un color.

Curiosamente configuración fondo: rgba (0,0,0,0); No funciona por alguna razón?

Si desea estar seguro y, de hecho, suministrar una URL de imagen válida puede utilizar:

Fondo: url (datos: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII =);

Este es un fondo base64 100% transparente de un solo píxel.

Voy a notar que esta situación sólo comenzó a ocurrir para mí cuando establecí mi visor de 640 para que el sitio móvil sería escala muy bien para cualquier navegador móvil.

Esto parece ser un error con la escala de vista que no funciona correctamente de lo que puedo decir.

Este es un viaje bien.
He configurado mi Android para no ajustar automáticamente las páginas, solucionado el problema.
A continuación, estableció mi teléfono a las páginas de ajuste automático, agregó a mi <p> en mi background: black; css background: black; Y es fijo.
Otra cosa extraña es que en mi hoja de estilos, si configuro p{ text-align: center} , el <p> extiende completamente como espero, con el teléfono configurado para ajustar automáticamente las páginas y sin configuración de fondo. También hice text-align: right , funciona como se esperaba. Entonces cambié el text-align: left , ahora se rompe otra vez. Muy, muy extraño problema aquí …

Esto también es cierto para la etiqueta <li> . El mismo problema. Arreglé ambos problemas añadiendo p, li {background: url('');} a mi hoja de estilo css.

En lugar de usar <p> , <div> u otras etiquetas dentro de <td> , simplemente puede usar <span> y hará el truco. Parece que a partir de Android 4, el navegador de Internet por defecto tiene algunos problemas de interpretación. He probado antes en android 2 y funciona muy bien sin ningún "ajuste".

Sobre la base de esta pregunta y su pregunta anterior, no parece haber ninguna razón obvia por la que no debería funcionar. Sin embargo, algo que sucedió de regreso en el día fue que si no declarar (en algunos navegadores sin nombre) atributos específicos, las propiedades no inherit como se suponía.

Debido a que no hay ninguna razón por la que el <p> debe renderizar de esa manera, Y el anterior solía ser un problema conocido, yo recomendaría establecer el width del <body> a 100% ya que puede ser un caso de herencia perdida.

EDIT: Alternativa

Otra solución popular al problema mencionado anteriormente era envolver los elementos ofensivos en un container <div> de clase que tenía el width especificado. Ambas son típicamente soluciones viables que mejoran significativamente la consistencia cruzada entre los navegadores.

Espero que esto ayude, FuzzicalLogic

Tengo el mismo problema en 2 sitios diferentes. Tuve que trabajar alrededor de esto mediante la creación de una imagen de fondo png transparente.

En mi caso, los elementos p tenían exactamente el ancho del ancho de la pantalla del dispositivo, por lo que girar el dispositivo cambió el ancho de los elementos p.

Incluso establecer un ancho fijo con! Importante en la p fue ignorado!

Esto puede no ser la respuesta que necesita, pero encontré que funciona si usted da es una display:inline; CSS display:inline; Propiedad en lugar de la display:block; Por defecto, no extenderá toda la pantalla por más tiempo. No estoy completamente seguro de si esto funciona en Android (no tengo uno), pero tuve un problema similar en mi computadora portátil y esto lo arregló.

He encontrado una solución a este problema que realmente funciona! Esto es en realidad un ajuste en el navegador de Android "Auto-Ajustar Páginas". Apagar eso resolverá este problema con certeza.

Micro

  • ¿Por qué el Samsung Galaxy S ignora la metaetiqueta escalable por el usuario?
  • ¿Cómo se puede analizar HTML en android?
  • La codificación de html de Android 4.0 se descompone en la vista web
  • Webkit para Android: Los elementos con posicionamiento absoluto no respetan el índice z
  • Configuración de aplicaciones web Android
  • Comparación entre Corona, Phonegap, Titanium
  • Long h1 aumenta el tamaño de la fuente de todo el texto colocado estáticamente en los navegadores móviles
  • Multi Seleccionar cuadro <select> en dispositivos móviles
  • Desplazamiento automático hacia la vista de la entrada de enfoque
  • ¿Cómo convertir una cadena a UTF-8 en Android?
  • ¿Cómo implementar onclick en javascript y html para dispositivos con versiones inferiores de android?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.