Медиа-запросы работают в браузере, но не на мобильном - PullRequest
Новая
       2

Медиа-запросы работают в браузере, но не на мобильном

0 голосов
/ 13 января 2020

У меня есть медиа-запрос для Iphone X следующим образом: 

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

Он отлично работает на Chrome, но не на самом мобильном телефоне. У меня есть тег viewport на мета: 

<meta name="viewport" content="width=device-width,initial-scale=1.0">

1 Ответ

0 голосов
/ 14 января 2020

Ваш запрос кажется правильным, но убедитесь, что это именно то, что нужно для этого устройства. Вы можете получить правильные значения кросс-браузера @media (ширина) и @media (высота), зарегистрировав на консоли следующее: 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);

, а также перепроверьте мета-масштабирование initial-scale и увеличение , они могут испортить видовой экран вашего устройства.

Кроме того, этот запрос очень специфичен c. Если вы только - и я имею в виду только - хотите настроить таргетинг на это устройство, тогда это нормально, но, возможно, лучше использовать gi для более глобальных запросов, я обычно нацеливаюсь на 320 и 767 (меньше, чем старые Ipad) и, возможно, на 480 промежуточных между ними, если необходимо.

...