Mobil cihazlarda Medya sorgular tarayıcısında çalışır ama

oy
0

Ben şöyle Iphone X için bir medya sorgusu vardır:

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

Bu Chrome üzerinde mükemmel çalışır, ancak kendisi mobil yapmaz. Ben meta üzerinde görünüm penceresi etiketi var:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Oluştur 13/01/2020 saat 21:53
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

sorgu doğru görünüyor ama emin olun gerçekten bu cihaz testintg ihtiyaçlarının ne olduğunu. JavaScript ile konsola aşağıdaki giriş değerleri doğru çapraz tarayıcı @media (genişlik) ve @media (yükseklik kullanılabilir):

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

Ayrıca tekrar kontrol initial-scaleonlar viewport cihazlarınızı berbat olabilir, meta ve zoom.

Ayrıca, bu sorgu çok çok özeldir. Yalnızca ise - ve ben sadece ortalama - Tamam o zaman bu cihazı hedeflemek istediğiniz ama daha küresel sorguları için gi daha iyi olabilir, ben genellikle 320 ve 767 (daha küçük eski iPad'ler) ve belki 480 İnbetween gerekirse hedef almaktadır.

Cevap 13/01/2020 saat 22:00
kaynak kullanıcı

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