Fijación del posicionamiento absoluto en Android

Tengo mi sitio web y se ve muy bien en todas partes, sin embargo, no soy un codificador profesional para Android. No sé los caprichos extra que tiene y no estoy seguro de cuánto necesito saber realmente. ¿Hay alguna manera de individualizarlo como en los comentarios condicionales para IE?Fijación del posicionamiento absoluto en Android

Here is my website y el banner y el logotipo aparecen desactivados en el lado izquierdo de la pantalla. Tengo un Samsung Galaxy 3 y así es como se ve mi banner.

enter image description here

Ahora me doy cuenta de por qué ocurre esto, es porque están posicionados tanto en términos absolutos y, obviamente, la margin-left está haciendo que se vaya fuera de la pantalla. Sin embargo, no puedo cambiar eso sin destruir el diseño de todos los navegadores de escritorio normales.

#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; } 

#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color: 
#fff; border: 1px solid #b4b4b4; } 



<h1 id="site-title"><span><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></span></h1> 

    <div id="banner"> 
    <img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;"> 
    </div>

No estoy seguro de cómo debo trabajar para que el banner y el logotipo funcionen con Android. Cualquier ayuda es apreciada.

Fuente

2012-07-18 kia4567

¿ha considerado crear un sitio móvil independiente y redirigir a cualquier persona que tenga un navegador Android al sitio móvil? – psubsee2003

bastante seguro si envuelve su contenido en etiquetas div y aplica el estilo 'position: relative;' a esas etiquetas div hará que su posicionamiento absoluto funcione correctamente. No puedo probar esto en un dispositivo ahora mismo, así que no quería publicarlo como respuesta. –

@ psubsee2003 - No estoy realmente queriendo hacer un sitio web completamente nuevo o la codificación adicional para hacer la versión móvil para un pequeño problema de alineación. Sin embargo, es una buena práctica que no soy un experto en sitios web para dispositivos móviles – kia4567

Aunque este no es el problema descrito allí, el navegador Android tiene otro problema con respecto al posicionamiento absoluto; desaparecen los DIV absolutamente posicionados. La solución Paweł Komarnicki encontrado es -webkit-backface-visibility: hidden:

<div style="position: relative"> 
    <div style="position: absolute; -webkit-backface-visibility: hidden"> 
    </div> 
</div>

Fuente

2013-08-16 12:28:36

Esta respuesta debería ser abajo votada como no relacionada con la pregunta – msmfsd

Cuando necesite colocar elementos con un posicionamiento absoluto, casi siempre debe hacerlo dentro de un elemento de posición relativa.

<div style="position:relative;"><div style="position:absolute;"></div></div>

Fuente

2012-07-19 03:29:37

Mi problema está en mi Android (Samsung) que a menos que las otras respuestas, dejó: en píxeles da la posición correcta (absoluta), pero dejó: en% pasa a la posición 0 . Incluso por ejemplo izquierda: 10px; izquierda: 20%; va a la posición 0, calc() no funciona a la izquierda :, pero funciona en ancho de forma limitada.

Así que creo que% no funciona para la izquierda: en un Android. Entonces pensé en el problema anterior: el 50% era el problema, me pregunto si fue resuelto con posición relativa/absoluta. ¡Hice lo mismo pero sin solución! ¡Ninguna diferencia tampoco al usar -webkit-backface-visibility!

La solución: en lugar de izquierda: 17%, use izquierda: calc (17%) y la otra px fija a la izquierda: se toman, pero% no funciona !!!

Fuente

2014-10-22 01:33:22 Francois99

Fijación del posicionamiento absoluto en Android

Respuesta

Cuestiones relacionadas