Pourquoi la taille d'arrière-plan CSS: la couverture ne fonctionne-t-elle pas en mode portrait sur iOS?
Je suis en train de configurer une main splash-image
à travers les dispositifs. Je fais donc en vérifiant orientation
(touch) ou screen width vs. screen height
(aucun contact) et de définir une url en conséquence.
Puis-je ajouter 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
être l'image à charger en fonction de l'orientation et de la taille de l'écran.
Mon problème est que cela fonctionne bien dans landscape
mode, mais sur mon iPad dans portrait
mode, l'image est chargée (diffèrent en fonction portrait/paysage), MAIS il n'est pas élargi à la taille plein écran.
Question:
Je ne peux pas utiliser les 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.
source d'informationauteur frequent
Vous devez vous connecter pour publier un commentaire.
Lors de la vérification de l'orientation veuillez prendre note de ces points d'apple document -
et
Alors nous pouvons surmonter cette limitation en réglage de l'arrière-plan de la taille à 100% de la largeur ou de la hauteur, en fonction de l'orientation. Nous pouvons cibler l'orientation actuelle (ainsi que l'appareil iOS, à l'aide de device-width). Avec ces deux points, je pense que vous pouvez utiliser CSS
background-size:cover
sur iOS en mode portraitVoici quelques ressources que j'ai aussi rencontré lors de la recherche d'une solution: Flexible, évolutive images d'arrière-planplein évolutive images d'arrière-planparfait évolutive images d'arrière-planet cette discussion.
Ok. Voici comment ça fonctionne (Merci à @iMeMyself):
Donc d'abord définir à
100%
puis àcover
. De cette façon, tous les navigateurs qui ne peuvent pascover
obtenir la valeur de 100%, tandis que celles qui peuvent obtenir le 100% écrasés par la couverture.Code ici
C'fixation des images d'arrière-plan pour ipad
Il suffit d'entrer les tailles en fonction de votre image dimentions
Autant que je sache, cette méthode fonctionne sur tous les appareils IOS. En fonction de vos autres éléments de la page (en-tête, etc) vous devrez peut-être ajuster les z-index pour les &:avant de pseudo-élément.
Selon Conception de Sites web pour l'iPhone X iOS 11 introduit une nouvelle extension de l'existant
viewport
de la balise meta appeléviewport fit
qui permet de contrôler l'insetting comportement. Le paramètre par défaut estauto
qui ne couvrira pas la totalité de l'écran.Afin de désactiver par défaut l'encart de comportement et de provoquer la page de jeter à la taille réelle de l'écran, vous pouvez définir
viewport-fit
àcover
comme indiqué ici:Sans ce paramètre, les techniques actuelles utilisées pour les écrans de démarrage et de taille des héros les images peuvent ne pas s'afficher comme prévu sur l'iPhone X ou d'autres compatibles avec les appareils iOS.