CSSメディアクエリとJavaScriptのウィンドウ幅が応答テンプレートの

と一致していない、私は私のCSSメディアクエリを持っている：CSSメディアクエリとJavaScriptのウィンドウ幅が応答テンプレートの

@media screen and (max-width: 960px) { 
body{ 
/* something */ 
background:red; 
} 
}

そして、私は幅を記録するためにリサイズにjQueryの機能を作った：

$(window).resize(function() { 
console.log($(window).width()); 
console.log($(document).width()); /* same result */ 
/* something for my js navigation */ 
}

そして、そこCSSの検出とJS結果との違い、私はこのメタ持っている：原因SCに

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>

私はそれがだと仮定しロールバー（15ピクセル）。私はこれをより良くするにはどうすればいいですか？

出典

2012-07-03 benoît

CSSがデバイスの幅を使用していますが、JSがドキュメントの幅を使用しているためです。

jQuery width関数を使用する代わりに、JSコードのビューポート幅を測定するだけです。

このコードは、私の経験では、メディアクエリ幅がdocument.body.clientWidthを追跡するということでしたhttp://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

function viewport() { 
    var e = window, a = 'inner'; 
    if (!('innerWidth' in window)) { 
     a = 'client'; 
     e = document.documentElement || document.body; 
    } 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
}

出典

2012-07-03 11:53:51

それは私の仕事です！ありがとうございました！ –

固体。 $（document）.width（）よりもずっと優れています。 window.matchMedia（）はおそらく良いでしょうが、そのIE10 + – Bosworth99

ウィンドウにスクロールバーがあり、メディアクエリが少なくともChromeで最大幅を確認している場合、これはうまくいかないようです。あなたが特定のメディアクエリによって設定されていることを知っている要素のいくつかのCSSをチェックすることはうまくいくようです。 – mhenry1384

からです。縦スクロールバーが出たり来たりするので、ドキュメント、ウィンドウ、またはビューポート（）の幅を調べると、ウィンドウの高さに応じて、メディアクエリルールが変更された後にJavascriptが遅く実行される可能性があります。

document.body.clientWidthを確認すると、スクリプトコードをメディアクエリルールが有効になったときに一貫して実行できるようになりました。

（最小幅：873px）@media {
//いくつかのルール
}
...

（document.body.clientWidth> = 873）{
場合 //一部のコード

Andy Langtonのコードは私をこの上に置いた - ありがとう！

出典

2013-05-23 03:24:08 Jim

ボディが画面より広い場合、これは機能しません。目に見えないdivが固定され、幅が100％に設定されているソリューションを見ました。それを使用してクライアントWidhtは動作するはずです。 – LarS

私はhttp://www.w3schools.com/js/js_window.aspに次のコードを見つけました：

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

実際にその@Michael鳥の回答で答えと同じように働いて、それは読みがより簡単です。

編集：私は、CSSのメディアクエリに使用されているのとまったく同じ幅を与える方法を探していました。しかし、提案されたものはスクロールバーでSafari上で完璧に動作しません。私はmodernizr.jsを1つの中心的な機能で使い終わってしまった。コードの残りの部分では、ディスプレイのタイプがモバイル、タブレット、またはデスクトップであるかどうかをチェックするだけだ。私は幅のない興味を持ったように、これは私のために正常に動作します：

テスト要素の可視性：

getDisplayType = function() { 
    if (Modernizr.mq('(min-width: 768px)')){ 
    return 'desktop'; 
    } 
    else if (Modernizr.mq('(min-width: 480px)')){ 
    return 'tablet' 
    } 
    return 'mobile'; 
};

出典

2014-03-04 02:16:00 LarS

'document.documentElement'が存在しない場合、このスクリプトは失敗します。あなたはw3schoolsを信用しないでください。http://www.w3fools.com/ – ausi

を参照してください。@ausi：「w3schoolsを信用しないでください」よりも少し親切で精巧になりますか？私はこれまでのところ問題を見ることができません。参照してください[任意のクロスブラウザの問題document.documentElement]（http://stackoverflow.com/questions/11391827/any-cross-browser-issues-with-document-documentelement） – LarS

OK、 'document.documentElement'を持っています。それを知らなかった。 – ausi

こんにちは、私は応答のページに簡単にまとめてJSとCSSの仕事を得るために、この小さなトリックを使用しますCSS @メディアサイズの状態で表示されるかどうか。ブートストラップCSSを使用して iは、隠れ-XSクラス要素の可視性

var msg = "a message for U"; 
 

 
/* At window load check initial size */ 
 
if ($('#test-xsmall').is(':hidden') ) { 
 
    /* This is a CSS Xsmall situation ! */ 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 

 
} else { 
 
    /* > 768px according to CSS */ 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
} 
 

 

 
/* And again when window resize */ 
 

 
$(window).on('resize', function() { 
 
    if ($('#test-xsmall').is(':hidden')) { 
 
    msg = "@media CSS < 768px. JS width = " + $(window).width() + " red ! "; 
 
    $('.redthing-on-xsmall').addClass('redthing').html(msg); 
 
    } else { 
 
    msg = "@media CSS > 767px. JS width = " + $(window).width() + " not red ! "; 
 
    $('.redthing-on-xsmall').removeClass('redthing').html(msg); 
 
    } 
 
});

@media (min-width: 768px) { 
 
    .hidden-xs { 
 
    display: block !important; 
 
    } 
 
} 
 
@media (max-width: 767px) { 
 
    .hidden-xs { 
 
    display: none !important; 
 
    } 
 
} 
 
.redthing-on-xsmall { 
 
    /* need a scrollbar to show window width diff between JS and css */ 
 
    min-height: 1500px; 
 
} 
 
.redthing { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- the CSS managed Element that is tested by JS --> 
 
<!-- class hidden-xs hides on xsmall screens (bootstrap) --> 
 

 
<span id="test-xsmall" class="hidden-xs">THIS ELEMENT IS MANAGED BY CSS HIDDEN on @media lower than 767px</span> 
 

 

 
<!-- the responsive element managed by Jquery --> 
 
<div class="redthing-on-xsmall">THIS ELEMENT IS MANAGED BY JQUERY RED on @media max width 767px </div>

出典

2015-01-06 17:26:52

常に動作し、CSSメディアクエリと同期された回避策をテストします。

は

<body> 
    ... 
    <div class='check-media'></div> 
    ... 
</body>

スタイルを追加し、あなたがメディアクエリに入力することにより、変化しているJSチェックスタイルで

.check-media{ 
    display:none; 
    width:0; 
} 
@media screen and (max-width: 768px) { 
    .check-media{ 
     width:768px; 
    } 
    ... 
}

そして、特定のメディアクエリーに入力することにより、それらを変更身体にdiv要素を追加

if($('.check-media').width() == 768){ 
    console.log('You are in (max-width: 768px)'); 
}else{ 
    console.log('You are out of (max-width: 768px)'); 
}

一般に、仕様を入力することで変更されているスタイルを確認できますificメディアクエリ。

出典

2015-04-08 15:59:54

window.innerWidthは必要なものです。

（window.innerWidth < 768）

出典

2016-05-06 19:47:53 Ross

-1

CSSメディアクエリがwindow.innerWidthに等しいCSSで768ブレークポイントのために動作するかどうか。 Css Media Queriesはスクロールバーも計算します。

出典

2016-07-05 23:21:46

CSSメディアクエリとJavaScriptのウィンドウ幅が応答テンプレートの

答えて

関連する問題