web-dev-qa-db-fra.com

pourquoi CSS background-size: cover ne fonctionne-t-il pas en mode portrait sur iOS?

J'essaie de mettre en place un splash-image manuel sur plusieurs appareils. Je le fais en vérifiant orientation (appareils tactiles) ou screen width vs. screen height (aucun contact) et définir une URL en conséquence.

Puis j'ajoute cette règle CSS via 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)

x étant l'image à charger en fonction de l'orientation et de la taille de l'écran.

Mon problème est que cela fonctionne bien en mode landscape, mais sur mon iPad en mode portrait, la bonne image est chargée (elle diffère selon le portrait/paysage), MAIS elle n'est pas étendue à la taille plein écran.

Question :
Ne puis-je pas utiliser CSS background-size sur iOS en mode portrait?

Merci pour l'aide!

MODIFIER:
Je viens d’essayer sur mon smartphone Android. Fonctionne bien là-bas. Cela n'a aucun sens, pourquoi cela ne fonctionne pas sur iPad.

iosbackgroundportraitcss
12
frequent

Tout en vérifiant l’orientation, veuillez prendre note de ces remarques dans le document Apple

Fournir des images de lancement:

Les applications exclusivement iPhone ne peuvent avoir qu'une seule image de lancement. Il devrait être au format PNG et mesurer 320 x 480 pixels. Nommez votre fichier image de lancement Default.png.

Applications pour iPad uniquement: Créez une image de lancement pour chaque orientation prise en charge au format PNG. Chaque image de lancement doit faire 1024 x 748 pixels (pour le paysage) ou 768 x 1004 pixels (pour le portrait).

Applications universelles: Inclure les images de lancement pour iPhone et iPad.

Mettez à jour vos paramètres Info.plist Spécifiez les valeurs des propriétés UISupportedInterfaceOrientations et UIInterfaceOrientation.

et

Tous les navigateurs ne reconnaissent pas le mot clé de couverture pour background-size et, par conséquent, ignorez-le simplement.

Nous pouvons donc surmonter cette limitation en définissant la taille de l'arrière-plan sur 100% largeur ou hauteur, en fonction de l'orientation . Nous pouvons cibler l'orientation actuelle (ainsi que le périphérique iOS, en utilisant la largeur de périphérique). Avec ces deux points, je pense que vous pouvez utiliser CSS background-size:cover sur iOS en mode portrait

Voici d'autres ressources que j'ai également rencontrées lors de la recherche d'une solution: images d'arrière-plan adaptables et flexibles , images d'arrière-plan entièrement adaptables , images d'arrière-plan parfaitement adaptables , et this discussion.

8
iMeMyself

D'accord. Voici comment ça marche (Merci à @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; 
    }

Commencez donc par le régler sur 100%, puis sur cover. De cette manière, tous les navigateurs qui ne peuvent pas cover obtenir la valeur de 100%, tandis que ceux pouvant obtenir la couverture 100% remplacée par la couverture.

20
frequent

Code ici

Il fixant des images de fond pour ipad 

Il suffit d'entrer les tailles en fonction de vos dimensions d'image

/* 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;
  }
}
2
comonitos

Selon Conception de sites Web pour iPhone X iOS 11 introduit une nouvelle extension pour la balise méta viewport existante appelée viewport-fit , qui permet de contrôler le comportement d'insertion. Le paramètre par défaut est auto, qui ne couvrira pas tout l'écran.

Afin de désactiver le comportement d'insertion par défaut et de rendre la page pleine de l'écran, vous pouvez définir viewport-fit sur cover comme indiqué ci-après:

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

Sans ce paramètre, les techniques existantes utilisées pour les écrans de démarrage et les images de héros en taille réelle risquent de ne pas s'afficher comme prévu sur l'iPhone X ou d'autres appareils iOS conformes.

1
Josh Habdas

Autant que je sache, cette méthode fonctionne sur tous les périphériques IOS. Selon vos autres éléments de page (en-tête, etc.), vous devrez peut-être ajuster z-index pour l'élément &: before psuedo-element.

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;
            }
        }
    }
}
1
Russ Jones