Dotazy médií Práce na prohlížeči, ale ne na mobil

hlasů
0

Mám dotaz médií pro iPhone X jako následující:

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

Funguje to perfektně na Chrome, ale to není v mobilním sám. Mám výřezu značku na meta:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Položena 13/01/2020 v 21:53
zdroj uživatelem
V jiných jazycích...                            


1 odpovědí

hlasů
0

Váš dotaz se zdá správné, ale ujistěte se, že je to opravdu to, co tento přístroj jste testintg potřeby. můžete získat správný @media cross-browser (šířka) a @media (výška) hodnoty přihlásíte následující konzole s 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);

Také zkontrolujte, zda v initial-scalemeta a zoom, by mohly být zásahům do vašeho zařízení výřez.

Také, že dotaz je velice specifická. Pokud si jen - a mám na mysli jen - chcete cílit na toto zařízení pak je to v pořádku, ale že by bylo lepší, aby gi po více globálních dotazů, obvykle zacílit 320 a 767 (menší než staré iPady) a možná 480 mezi nimi v případě potřeby.

Odpovězeno 13/01/2020 v 22:00
zdroj uživatelem

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