Le travail des médias sur le navigateur mais pas sur mobile

voix
0

J'ai une requête de médias pour Iphone X comme suit:

@media screen and (min-width: 374px) and (max-width: 376px) and (min-height: 811px) and (max-height: 812px) {
  .welcome-banner {
    background-image: url('~assets/images/landing/welcome-banner-iphonex.jpg');
    background-size: cover;
    background-position: center;
    height: calc(110vh - 64px);
    display: flex;
  }
}

Il fonctionne parfaitement sur Chrome, mais il ne fonctionne pas dans le même mobile. J'ai la balise sur la fenêtre meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Créé 13/01/2020 à 21:53
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

votre requête semble juste, mais assurez-vous qu'il est vraiment ce que cet appareil, vous êtes besoins testintg. vous pouvez obtenir les valeurs @media cross-browser correct (largeur) et @media (hauteur) en vous connectant ce qui suit à la console avec javascript:

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(w,h);

aussi revérifier le initial-scaleméta et le zoom, ils pourraient être chambouler vos appareils viewport.

En outre, cette requête est très spécifique. Si vous ne - et je veux dire que - voulez cibler cet appareil alors qui est correct, mais il pourrait être préférable de gi pour les requêtes plus globales, je cible habituellement 320 et 767 (plus petits que les anciens iPAD) et peut-être 480 inbetween si nécessaire.

Créé 13/01/2020 à 22:00
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more