¿por qué el tamaño de fondo de CSS: la cubierta no funciona en modo vertical en iOS?

Question

Estoy tratando de configurar un manual splash-image en todos los dispositivos. Lo estoy haciendo al marcar orientation (dispositivos táctiles) o screen width vs. screen height (sin tocar) y configurar una URL en consecuencia.

Luego añadir esta regla CSS a través de Javascript:

document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0) 

Con x ser la imagen a cargar dependiendo de la orientación y el tamaño de la pantalla.

Mi problema es que esto funciona bien en el modo landscape, pero en mi iPad en el modo portrait, se carga la imagen correcta (difiere según el retrato/paisaje), PERO no se expande a pantalla completa.

Pregunta:
qué no puedo usar CSS background-size en IOS en el retrato-mode?

¡Gracias por la ayuda!

EDITAR:
Acabo de probar en mi teléfono inteligente Android. Funciona bien allí. No tiene sentido, por qué no funciona en el iPad.

Answer 1

Al comprobar la orientación por favor tome nota de estos puntos de documento de manzana -

Proporcionar lanzamiento de archivo:

iPhone aplicaciones sólo sólo puede tener una imagen lanzamiento. Debe estar en formato PNG y medir 320 x 480 píxeles. Denomine su imagen de inicio , archivo Default.png.

Aplicaciones de solo iPad: Cree una imagen de inicio para cada orientación compatible en formato PNG. Cada imagen de inicio debe tener 1024 x 748 píxeles (para el paisaje) o 768 x 1004 píxeles (para el retrato).

Aplicaciones universales: Incluyen imágenes de inicio para iPhone y iPad.

actualizar la configuración Info.plist especifican los valores de los UISupportedInterfaceOrientations y UIInterfaceOrientation

y

No todos los navegadores reconocen la palabra clave cubierta para el fondo de tamaño, y como resultado de simplemente ignóralo.

Así podemos superar esa limitación por configurar el fondo de tamaño de anchura o la altura del 100%, dependiendo de la orientación. Podemos orientar la orientación actual (así como el dispositivo iOS, usando el ancho del dispositivo).Con estos dos puntos creo que se puede utilizar CSS background-size:cover en IOS en el retrato en modo

Estos son algunos otros recursos también me encontré en la búsqueda de una solución: Flexible scalable background images, full scalable background images, perfect scalable background images y this discusión.

Answer 2

Ok. Aquí es cómo está funcionando (Gracias a @iMeMyself):

body { 
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    } 

Así primer set a 100%, a continuación, a cover. De esta forma, todos los navegadores que no pueden obtener cover obtienen el 100% del valor, mientras que los que pueden obtener el 100% sobrescriben por tapa.

Answer 3

código aquí

Es la fijación de imágenes de fondo para ipad

Sólo tienes que introducir tamaños de acuerdo a sus Dimensiones imagen

/* Page background-image landscape for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image portrait for iPad 3 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    .introduction-section { 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    } 
} 
/* Page background-image landscape for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: landscape) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 2024px 768px !important; 
    background-size: 2024px 768px !important; 
    } 
} 
/* Page background-image portrait for iPad 1/2 */ 
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (orientation: portrait) 
    and (-webkit-min-device-pixel-ratio: 1) { 
    .introduction-section { 
    background: url('background-image.jpg') no-repeat center top #000 !important; 
    -webkit-background-size: 5024px 2024px !important; 
    background-size: 5024px 2024px !important; 
    } 
} 

Answer 4

Por lo que yo sé, este método funciona en todos Dispositivos IOS. Dependiendo de los otros elementos de la página (encabezado, etc.) es posible que necesite ajustar el índice z para &: antes del elemento psuedo.

html { 
    height:100% !important; 
} 

body { 
    height:100%; 
    min-height:100%; 
    overflow-x:hidden; 
    overflow-y:auto; 
    // use your own class here // 
    &.body-class { 
     // @screen-xs-max is a Bootstrap3 variable name // 
     @media screen and (max-width:@screen-xs-max) { 
      min-height:100vh; 
      position:relative; 
      &:before { 
       position:fixed; 
       top:0; 
       left:0; 
       right:0; 
       bottom:0; 
       display:block; 
       content:""; 
       z-index:-1; 
       background-image:url(background-image.jpg); 
       background-position:center; 
       background-size:cover; 
       // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes // 
       -webkit-background-size:cover; 
      } 
     } 
    } 
} 

Answer 5

Según Designing Websites for iPhone X IOS 11 introduce una nueva extensión para el viewport etiqueta meta existente llamado viewport-fit, que proporciona control sobre el comportamiento insetting. La configuración predeterminada es auto, que no cubrirá toda la pantalla.

Para deshabilitar el comportamiento de inserción por defecto y hacer que la página a diseñar con el tamaño completo de la pantalla, se puede establecer viewport-fit a cover como se muestra aquí:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> 

Sin este ajuste técnicas existentes usados para pantallas emergentes e imágenes de héroe de tamaño completo pueden no mostrarse como se esperaba en el iPhone X u otros dispositivos iOS conformes.