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>

更新：

如果我在这个宽度屏幕（1920px）中放入jQuery / Javascript代码，结果是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在大多数情况下返回的内容。

祝你好运！

媒体查询无法正常工作

2 个答案: