El navegador Android estira la imagen

El sitio del que estoy hablando actualmente está en vivo . Funciona bastante bien para mí. Sólo hay un error que me vuelve loco:

En el navegador Android estándar (probado en 4.1.2, LG), el logotipo se estira y cambia el tamaño de una manera muy mala. Puedes ver una demostración más abajo.

El CSS para posicionar y dimensionar el logotipo es bastante simple, usando la position: absolute en una position: fixed elemento position: fixed :

Margen

 <div class="fixed"> <div id="logo"> <a href="logo-link"> <img src="logo.jpg" height="55" width="34"> </a> </div> </div> 

CSS:

 * {box-sizing: border-box} /* bootstrap system */ .fixed { position: absolute; top: 0; left: 0; right: auto; bottom: auto; height: 85px; } .logo { width: 85px; position: absolute; top: 0; left: 0; right: auto; bottom: auto; } img { margin: 20px 27px; max-width: 40px; height: auto; display: inline-block; } 

Revise la Demostración

Mi inspector FF DE44 + dice que el padre <a> tiene el tamaño 0x24 y el <img> tamaño 240×164 (que son valores en línea). El padre no tiene z-index mientras que la imagen tiene z-index: 1500 .

Me parece que el navegador de Android no tiene valores de ancho y altura de los padres que puede hacer referencia mientras que la bottom: auto y right: auto obliga a hacerlo.

Más aún, al mirar el código del sitio 'vivo' hay más de lo que usted está reclamando en su pregunta, porque le da los valores de la imagen pequeña pero la CSS de la grande (que también ha left: auto , Mientras que el pequeño no tiene fondo, izquierda, derecha en absoluto).

Es mejor que eche un vistazo a su código y revise el código de su pregunta para reflejar el código de la versión 'en vivo', de lo contrario no podremos ayudarle adecuadamente.

Trabajando ciego porque no tengo ese navegador, pero sospecho que el problema será el derecho: auto bottom: auto.

 .fixed { position: fixed; top: 0; left: 0; right: 0; bottom: 85px; } #logo { width: 85px; height:85px; position: absolute; top: 0; left: 0; background-color:pink; } #logo a { display:block; width: 85px; height:85px; } img { margin:15px 25px; } 

Dado que se conoce el ancho, intente reemplazar auto con los números reales.

Aquí está un violín: https://jsfiddle.net/mnkx66zj/

También debe aumentar el área de clic en su enlace haciendo que el bloque de visualización del logotipo y vínculo sea igual al tamaño del padre.

  • ¿Cómo puedo detener la capitalización automática en un campo de introducción de texto html en un teléfono Android / Samsung?
  • Escritorio remoto basado en web para conectarse a android
  • Cómo eliminar el margen inbuilt en la vista web de Android con javascript
  • Cómo hacer un reemplazo sobre las webs cargadas en una Webview
  • ¿Cómo evitar hacer clic en el elemento html inferior al hacer clic en el elemento html encima de él en dispositivos táctiles?
  • Analizando HTML con Jsoup y eliminando spans con cierto estilo
  • ¿Cómo emitir una página web móvil en Android?
  • ¿Cómo hacer el texto multi spannable?
  • Decodificar entidades HTML en android
  • ¿Cómo puedo añadir una nueva línea en formato html en android?
  • Html tipo de entrada = número no permite puntos decimales en ciertos droides
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.