Screen.width / $ (window) .width () Медиа-очереди

Таким образом, похоже, что в мобильных устройствах медиа-запросы используют screen.width который не изменяется вообще. Но на моем рабочем столе, когда я изменяю размер окна, screen.width остается неизменным, изменения $(window).width() и применяются соответствующие таблицы стилей. Таким образом, кажется, что в настольных браузерах медиа-запросы используют $(window).width() Это меня $(window).width().

Пример кода Мои медиа-запросы

@media only screen and (max-width: 1050px), only screen and (max-device-width: 1050px){
 --other stuff
 background-color: lightgray;

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px){
   -- other stuff
   background-color: orchid; 

На моем рабочем столе screen.width равен 1920, а $(window).width() - 1027, а первая таблица стилей применяется, когда я сделал окно меньше, а screen.width - 1920, а $(window).width() - 738 второй стиль также применяется при переопределении первого цвета фона таблицы стилей. Таким образом, значение $(window).width() определяет таблицу стилей

На сафари-мобиле в моем симуляторе ipad в портретном режиме screen.width составляет 768, а $(window).width() - 768 и, как ожидается, применяется таблица стилей. Но когда я screen.width в ландшафтный режим screen.width равен 768, а $(window).width() равно 1024, обе таблицы стилей все еще применяются, поскольку вторая таблица стилей переопределяет цвет фона первого, когда он не должен,

В верхней части моего index.html у меня есть этот метатег

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />

Я не знаю, повлияет ли это на что-либо.