css - 媒体查询无法正常工作

Question

我正在尝试使用媒体查询设置规则：

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

但这种格式仅适用于屏幕宽度为 1930 像素或更大的情况（在 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>

更新：

如果我将 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 返回的内容。

祝你好运！