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.
- La posición no funciona en el navegador móvil
- ¿Cómo convertir una cadena a UTF-8 en Android?
- Android recibe texto de html
- Desactivar ventanas emergentes y alarmboxes en la vista web de android
- Android-TextView setText en Html.fromHtml para mostrar la imagen y el texto
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; }
- Envío de imágenes HTML en línea en el correo electrónico
- Android: Establecer vínculo con <a href> en TextView
- ¿El 'meta name = "google-play-app"' funciona?
- ¿Cómo pasar el hipervínculo a Gmail en Intent ACTION_SEND?
- Análisis de JSoup: obtener el elemento siguiente
- Cómo arreglar el posicionamiento absoluto en Android
- Cómo incrustar un clip de YouTube en un WebView en Android
- La línea Html (regla horizontal) no es compatible con el cliente de Gmail de Android
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.
- ¿Reduce Android la velocidad de descarga cuando se apaga la pantalla?
- Diferencia entre layout-finger y directorio de diseño