ios - plus - tamaño de imagen para iphone 6
tamaño de fondo: la cubierta no funciona en iOS (5)
Este es mi código:
background-color:#fff;
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center center;
Está trabajando en el escritorio, iPad y Android móvil:
En Chrome y Safari en iPhone, el fondo es demasiado grande:
Elaborando la respuesta de Ryan, sin agregar ningún nuevo nodo html ni usar las consultas @media , usando solo un css .
Si desea mantener un fondo
fixedtamaño decoveren todos los dispositivos, incluido iOS, sin agregar un nuevo nodo, entonces el truco es hacer el posicionamiento fijo en el elemento (cuerpo) y no el fondo, ya que un fondo y una cubierta fijos El tamaño desordena el iOS.
También funciona en producción como un encanto en iOS: https://www.doklist.com/
Este código no funcionará, ya que iOS usa la altura del document y no la viewport :
body {
background: url(https://www.w3schools.com/css/trolltunga.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Ahora, esta es la magia, el body:after se fija, y no el fondo :
body:after{
content:"";
position:fixed; /* stretch a fixed position to the whole screen */
top:0;
height:100vh; /* fix for mobile browser address bar appearing disappearing */
left:0;
right:0;
z-index:-1; /* needed to keep in the background */
background: url(https://www.w3schools.com/css/trolltunga.jpg) center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Podría haber usado el cuerpo en sí mismo, con "position: fixed; overflow-y: scroll", pero no quería alterar la posición del cuerpo y mi diseño general.
Así que hacer esto en el cuerpo: después es una solución muy fácil. He probado la solución en Mac e iOS con Firefox, Safari, Chrome.
También creé un repositorio github con 2 ejemplos para esto: https://github.com/thesved/fixed-cover-background
Esta publicación responde a sus preguntas: ¿por qué el tamaño de fondo de CSS: la cubierta no funciona en modo retrato en iOS?
No todos los navegadores reconocen la palabra clave de la portada para el tamaño de fondo, y como resultado, simplemente la ignoran.
Así que podemos superar esa limitación estableciendo el tamaño del fondo a 100% de ancho o alto, dependiendo de la orientación. Podemos orientar la orientación actual (así como el dispositivo iOS, utilizando el ancho del dispositivo). Con estos dos puntos, creo que puedes usar el tamaño de fondo CSS: cubierta en iOS en modo retrato
Ver ese post para más recursos.
Esto sucede cuando tienes background-attachment:fixed . En el móvil, normalmente pongo background-attachment:scroll dentro de una consulta @media .
Como @RyanKimber señaló , las imágenes adjuntas fijas utilizan todo el tamaño <body> . En el móvil, esto puede ser realmente alto, lo que hace que su imagen salga disparada. Al volver a scroll el archivo adjunto en scroll la imagen de portada se puede estirar dentro de su propio contenedor.
Esto también me causó una serie de problemas. El problema es que iOS utiliza la altura y anchura completas del cuerpo en lugar de la ventana gráfica para decidir el tamaño.
Nuestra solución fue crear un nuevo <div class="backdrop"></div> .
Aplicamos el fondo a este div y le damos posición: absoluto; arriba: 0; abajo: 0; izquierda: 0; derecha: 0.
Dado que esta div es ahora el tamaño de la ventana gráfica, background-size: cover funciona bien.
Prueba esto:
background: url( /gfx/background.jpg ) no-repeat top center fixed;
background-size: 100vmax 100vmax;
Como se mencionó anteriormente, la "cubierta" cubrirá la altura del documento, no la altura de la vista. La mayoría de las unidades no funcionarán como se espera, por lo tanto, vmax.
Realmente no cubre, hace el trabajo con imágenes cuadradas :)