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

Question

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

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

但这种格式只适用于屏幕宽度为 1930px 或更大的情况(在 Chrome 的插件响应工具中测试)。

我的视口(viewport)标签是:

<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

CSS 屏幕宽度和 JS 屏幕宽度(内宽和外宽)并不总是适合所有浏览器。

这是我所知道的最好的解释:http://www.matanich.com/2013/01/07/viewport-size/

总而言之，在大多数情况下，相信您的 CSS @media 设置而不是 JS 返回的内容。

祝你好运!