Медиа Запрос не работает правильно

Question

Я пытаюсь установить правила с помощью медиа запросов:

@media screen and (min-width: 1920px){ 
    #dados_contato_rodape p{ 
     font-size: 5.5em; 
     border: 1px solid yellow; 
    } 
} 

Но этот формат применяется только тогда, когда ширина экрана 1930px или более (тестирование в аддонах реагирующих инструментов для Chrome).

Мой видовой экран тег:

<meta name = "viewport" content = "width=device-width, maximum-scale = 1, minimum-scale=1" /> 

HTML:

<div id="dados_contato_rodape"> 
    <p>contato@contato.com.br</p> 
    <p>55 51 9999 9999</p> 
</div> 

UPDATE:

Если я ставлю JQuery/JavaScript кода в этой ширины экрана (1920px), результат 1920px :

$(window).outerWidth() 

Медиа-запросы отлично работают в других ситуациях, но только в этом случае (до этого момента) он не работает.

Может ли кто-нибудь помочь мне с этим?

спасибо.

Answer 1

Используйте сравнение метода JQuery с CSSOM и documentElement свойства:

var window_diff = window.outerWidth - $(window).outerWidth(); 
var screen_diff = screen.availWidth - $(window).outerWidth(); 
var document_diff = document.documentElement.clientWidth - $(window).outerWidth(); 

Похоже, JQuery использует clientWidth свойство.

Использование min-device-width в качестве альтернативы:

@media screen and (min-device-width: 1920px) { 
... 
} 

Answer 2

экрана CSS, ширины и ширина экрана JS (как внутренняя ширина и наружная ширина) не всегда совпадают для всех браузеров.

Это лучшее объяснение, которое я знаю: http://www.matanich.com/2013/01/07/viewport-size/

Таким образом, в общем, доверять своему CSS @media настройки, а над тем, что возвращенным JS в большинстве ситуаций.

Удачи вам!