0

メディアクエリを使用してルールを設定しようとしています:

@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()

メディア クエリは他の状況では正常に機能していますが、この場合のみ (現時点では) 機能していません。

誰かがそれを手伝ってくれますか？

ありがとうございました。

4

2 に答える 2

0

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-05T21:48:01.330 に答える
0

CSS の画面幅と JS の画面幅 (内幅と外幅の両方) は、すべてのブラウザーで常に一致するとは限りません。

これは私が知っている最良の説明です: http://www.matanich.com/2013/01/07/viewport-size/

要約すると、ほとんどの状況で JS によって返されるものよりも、CSS の @media 設定を信頼してください。

幸運を！

于 2013-07-06T12:40:13.963 に答える