Médialekérdezéseket munka böngésző, de nem mobilon

szavazat
0

Van egy média lekérdezést Iphone X, mint a következő:

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

Ez tökéletesen működik a Chrome-on, de ez nem a mobil is. Lenne az ablakon tag a meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
A kérdést 13/01/2020 21:53
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
0

Ön keresett jónak tűnik, de győződjön meg arról, hogy valóban az, amit ez a készülék van testintg igényeinek. akkor kap a megfelelő cross-browser @media (szélesség) és @media (magasság) értékeket bejelentkezik a következő a konzol 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);

is ellenőrizze a initial-scalemeta és nagyítás, lehet, hogy Messiás az eszközök nézetben.

Továbbá, ez a lekérdezés nagyon nagyon különleges. Ha csak - úgy értem, csak - a megcélozni kívánt ez a készülék, akkor ez rendben van, de lehet, hogy jobb, ha gi több globális kérdések, én általában cél a 320 és 767 (kisebb, mint a régi iPad), és talán 480 inbetween ha szükséges.

Válaszolt 13/01/2020 22:00
a forrás felhasználó

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