Media queries werk in de browser, maar niet op mobiele

stemmen
0

Ik heb een media-query voor Iphone X als volgt:

@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;
  }
}

Het werkt perfect op Chrome, maar het niet in de mobiele zelf. Ik heb de viewport tag op de meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
De vraag is gesteld op 13/01/2020 om 23:53
bron van user
In andere talen...                            


1 antwoorden

stemmen
0

uw vraag goed lijkt, maar zorg ervoor dat het is echt wat dit apparaat bent u testintg behoeften. kunt u de juiste cross-browser @media (breedte) en @media (hoogte) krijgen waarden door in te loggen de volgende handelingen uit om de console met 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);

Ook controleer de initial-scalemeta en zoom, kunnen ze viewport worden verpesten uw apparaten.

Ook die vraag is heel erg specifiek. Als je alleen - en ik alleen maar betekenen - dit apparaat wilt richten dan is dat ok, maar het zou beter zijn om gi voor meer globale query's, die ik target meestal 320 en 767 (kleiner dan de oude Ipads) en misschien 480 inbetween indien nodig.

antwoordde op 14/01/2020 om 00:00
bron van user

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