Fondo-adjunto: fijo interferir con el tamaño de fondo
Tengo una imagen de fondo escalada para caber dentro de su contenedor, y tengo repliegues apropiados (no se muestra) para cuando Modernizr detecta que el navegador no es compatible con el tamaño de fondo.
.wrap { width: 200px; height: 116px; position: absolute; background-image: url(image.jpg); background-attachment: fixed; background-position: 0 0; background-size: 200px 116px; background-repeat: no-repeat; } He aquí un ejemplo: http://jsfiddle.net/crowjonah/6xYNm/
- ¿Hay una manera de hacer un número de teléfono clicable en un teléfono de iphone o android para hacer una llamada en HTML?
- Cómo abrir un teclado numérico en android / chrome con <input type = "text">?
- ¿Cómo puedo hacer que el navegador Android muestre mi documento al tamaño de la pantalla?
- Detectar si el navegador admite la reproducción automática de medios incrustados: YouTube playVideo () e iOS
- ¿Cómo puedo encontrar la ventana virtual / ancho de pantalla con Javascript?
Se ve muy bien en Chrome, Firefox, Safari (escritorio e iOS), sin embargo estoy teniendo problemas en algunos casos de Android.
Aquí hay un UA para un dispositivo que se muestra correctamente:
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Xoom Build/IMM76L) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
Y aquí hay un UA para un dispositivo que no:
Mozilla/5.0 (Linux; U; Android 4.2.2; en-us; sdk Build/JB_MR1.1) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
La versión más reciente de Android (emulada) escala la imagen de fondo fija para que se apague y pixelice para encajar (creo) en la ventana de visualización y no presta atención al tamaño de su contenedor o al background-size definido.
Y eso está bien. De hecho, eso es lo que MDN dice que sucederá :
Si el archivo adjunto del fondo es fijo, el área de posicionamiento de fondo es en su lugar el área entera de la ventana del navegador, sin incluir el área cubierta por barras de desplazamiento si están presentes.
Mi problema es que no sé cómo detectar razonablemente cuándo será o no será el caso para que pueda ajustar en consecuencia. Debido a la disposición y las animaciones en la página, realmente quiero que el fondo se fije para todos los navegadores que lo apoyan bien, y puede conformarse con scroll en este caso periférico si puedo averiguar cómo orientarlo.
Actualización (10/3/2013): Para evitar confusiones, he actualizado el violín para demostrar un ejemplo más realista y problemático que justifica más de las propiedades de CSS que he definido: http://jsfiddle.net/crowjonah / QtpVN /
- Optimizar la aplicación ASP.NET Navegadores IPhone y Android para la aplicación ASP.NET
- Buscando una alternativa para iScroll (Scrolling Div's en iOS / Webkit)
- IScroll 4 no funciona con el elemento form <select> iPhone Safari y navegador Android
- Entrada de Android / iOS enfocada al tocar en el cuerpo de la página
- Evento de clic de JQuery de un elemento div en li no disparado en Safari móvil
- ¿Es posible, en JavaScript, detectar cuándo se apaga la pantalla en los navegadores de Android y iOS
- Detectar la compatibilidad con la entrada de archivos del navegador
- Cómo detectar si la aplicación web se ejecuta independientemente en Chrome Mobile
Puede preparar el CSS dentro de dos clases .works {…} y .does_not_work {…}, y luego revisar las cosas a través de JavaScript, para responder a la pregunta, en qué caso se enfrenta. Dependiendo del resultado, el JavaScript solo se ajustará a estas clases CSS anteriores. Al final, ¿quién va a desactivar JavaScript en su teléfono móvil (es decir, Android)? ¿Qué piensas de esta idea? Saludos, M.
Quitar background-size añadir display:block;
Y inténtalo de nuevo
Has probado
Background-image: url (imagen.jpg); Tamaño de fondo: 100%;
Take away posición: absoluto; Fondo-adjunto: fijo;
- Android traducir animación – mover permanentemente Ver a nueva posición usando AnimationListener
- ShouldNotReachhere classFileParser ANDROID