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

j'essaie de mettre en place un manuel splash-image à travers les appareils. Je le fais en vérifiant orientation (dispositifs tactiles) ou screen width vs. screen height (aucune touche) et je règle 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)

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

mon problème est que cela fonctionne très bien en mode landscape , mais sur mon iPad en portrait mode, l'image correcte est chargée (différent selon portrait/paysage), mais elle n'est pas étendue à la taille Plein écran.

Question :

Puis-je ne pas utiliser CSS background-size sur iOS en mode portrait?

Merci pour l'aide!

EDIT:

Juste essayé sur mon Smartphone Android. Fonctionne très bien. N'a pas de sens, pourquoi il ne fonctionne pas sur iPad.

12
demandé sur frequent 2012-09-26 14:02:01

5 réponses

lors de la vérification de l'orientation, veuillez prendre note de ces points du document apple -

Fournir Des Images De Lancement:

applications iPhone seulement ne peut avoir qu'une seule image de lancement. Il doit être au format PNG et mesurer 320 x 480 pixels. Nom de l'image de lancement de fichier par Défaut.png.

applications iPad uniquement: créer un image de lancement pour chaque orientation prise en charge dans le format PNG. Chaque image de lancement doit être 1024 x 748 pixels (pour paysage) ou 768 x 1004 pixels (pour portrait).

applications Universelles: Comprennent le lancement des images pour l'iPhone et l'iPad.

Mettez À Jour Vos Informations.paramètres plist spécifiez les valeurs pour UISupportedInterfaceOrientations et UIInterfaceOrientation

et

tous les navigateurs ne reconnaissent pas le mot-clé de couverture pour la taille de l'arrière-plan , et par conséquent, il suffit de l'ignorer.

de sorte que nous pouvons surmonter cette limite en réglant la taille de l'arrière-plan à 100% de largeur ou de hauteur, selon l'orientation . Nous pouvons cibler l'orientation actuelle (ainsi que le périphérique iOS, en utilisant la largeur du périphérique). Avec ces deux points, je pense que vous peut utiliser CSS background-size:cover sur iOS en mode portrait

Voici quelques ressources que j'ai aussi rencontré lors de la recherche d'une solution: Flexible évolutive images d'arrière-plan , plein évolutive images d'arrière-plan , parfait évolutive images d'arrière-plan , et ce de discussion.

8
répondu iMeMyself 2015-03-28 15:46:07

Ok. 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; 
    }

donc d'abord mis à 100% , puis à cover . De cette façon, tout navigateur qui ne peut pas cover obtenir la valeur de 100%, tandis que ceux qui peuvent obtenir le 100% écrasée par couverture.

20
répondu frequent 2012-10-04 19:44:20

Code ici

C'fixation des images d'arrière-plan pour l'ipad

entrez juste les tailles selon les dimensions de votre 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
répondu comonitos 2014-04-23 14:20:46

pour autant que je sache, cette méthode fonctionne sur tous les appareils IOS. En fonction de vos autres éléments de page (en-tête etc), vous devrez peut-être ajuster z-index pour l'élément &:avant 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;
            }
        }
    }
}
1
répondu Russ Jones 2016-11-02 12:09:23

selon conception de sites web pour iPhone X iOS 11 introduit une nouvelle extension pour l'étiquette existante viewport meta tag appelé viewport-fit , ce qui permet de contrôler le comportement d'insetting. Le paramètre par défaut est auto , qui ne couvrira pas tout l'écran.

afin de désactiver le comportement par défaut et de faire en sorte que la page se présente à la taille complète de l'écran, vous pouvez définir viewport-fit à cover comme indiqué ici: 

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

sans ce réglage, les techniques existantes utilisées pour les écrans de projection et les images hero grandeur nature peuvent ne pas s'afficher comme prévu sur l'iPhone X ou d'autres appareils iOS conformes.

1
répondu Josh Habdas 2017-10-04 17:36:40