Media spørringer arbeid i nettleseren, men ikke på mobil

stemmer
0

Jeg har en media spørring for Iphone X som følgende:

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

Det fungerer perfekt på Chrome, men det gjør ikke i mobilen selv. Jeg har synsfeltet lappen på meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Publisert på 13/01/2020 klokken 23:53
kilden bruker
På andre språk...                            


1 svar

stemmer
0

søket virker riktig, men pass på at det virkelig er hva denne enheten du er testintg behov. du kan få riktig cross-browser @media (bredde) og @media (høyde) verdier ved å logge deg følgende til konsollen med 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);

også kontrollerer initial-scalemeta og zoome, de kan rote opp enhetene dine synsfeltet.

Dessuten er det spørsmålet veldig veldig spesifikke. Hvis du bare - og jeg mener bare - ønsker å målrette denne enheten så det er ok, men det kan være bedre å GI for mer globale spørsmål, jeg vanligvis målrette 320 og 767 (mindre enn gamle Ipads) og kanskje 480 innimellom hvis det er nødvendig.

Svarte 14/01/2020 kl. 00:00
kilden bruker

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