媒体查询不起作用正确

我尝试使用媒体查询设定一个规则：媒体查询不起作用正确

@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>[email protected]</p> 
    <p>55 51 9999 9999</p> 
</div>

UPDATE：

如果我把jQuery的/ Javascript代码在这个宽屏（1920px），其结果是1920px ：

$(window).outerWidth()

媒体查询在其他情况下工作正常，但只有在这种情况下（直到此刻）它不起作用。

有人可以帮我吗？

谢谢。

来源

2013-05-01 Alan Gularte

这是在Mac上吗？（我想知道Mac的隐藏滚动条区域是否涉及这里） – 2013-05-01 03:38:33

@ ralph.m它是Windows ...已经...不要告诉我，在Mac上我会发现其他问题...：/ – 2013-05-01 03:48:13

使用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) { 
... 
}

来源

2013-07-05 21:48:01

CSS屏幕宽度和屏幕JS宽度（两个内部宽度和外宽度）并不总是与对所有浏览器。

这是我所知道的最好的解释：因此，在总结http://www.matanich.com/2013/01/07/viewport-size/

，相信你的CSS @media设置，而在什么被JS在大多数情况下返回。

祝你好运！

来源

2013-07-06 12:40:13

媒体查询不起作用正确

回答

相关问题