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

голоса
0

У меня есть медиа-запрос для 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, но не в сам мобильный. У меня есть окна проекции метки на мета:

<meta name=viewport content=width=device-width,initial-scale=1.0>
Задан 13/01/2020 в 21:53
источник пользователем
На других языках...                            


1 ответов

голоса
0

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

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

Ответил 13/01/2020 в 22:00
источник пользователем

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