媒體查詢不起作用正確

我嘗試使用媒體查詢設定一個規則：媒體查詢不起作用正確

@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

媒體查詢不起作用正確

回答

相關問題