web-dev-qa-db-ja.com

CSSメディアクエリとJavaScriptウィンドウの幅が一致しません

レスポンシブテンプレートの場合、CSSにメディアクエリがあります。

@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結果には違いがあり、このメタがあります：

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

スクロールバー（15 px）によるものだと思います。これをどのように改善できますか？

javascriptjquerymedia-queries
50
benoît

スクロールバーについては正しいです。CSSはデバイスの幅を使用しているのに、JSはドキュメントの幅を使用しているためです。

行う必要があるのは、jQuery幅関数を使用する代わりに、JSコードでビューポートの幅を測定することです。

このコードは 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' ] };
}
74
Michael Bird

http://www.w3schools.com/js/js_window.asp で次のコードを見つけました。

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

実際には、@ Michael Birdの回答の回答と同じように機能しますが、読みやすくなっています。

Edit：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';
};
7
LarS

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

if（window.innerWidth <768）は、CSSの768ブレークポイントに対して機能します。

4
Ross

常に機能し、CSSメディアクエリと同期される回避策。

Divをbodyに追加します

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

特定のメディアクエリを入力して、スタイルを追加して変更します

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

次に、メディアクエリを入力して変更するJSチェックスタイルで

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

そのため、通常、特定のメディアクエリを入力することで、変更されているスタイルを確認できます。

1
Arsen Pyuskyulyan

こんにちは、この小さなトリックを使用して、レスポンシブページでJSとCSSを簡単に連携させることができます。

CSS @mediaサイズ条件で表示される要素の可視性をテストします。 bootstrap CSS iを使用して、hidden-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>
1
fr-info

私の経験では、メディアクエリの幅はdocument.body.clientWidthを追跡します。垂直スクロールバーが出入りするため、ドキュメント、ウィンドウ、またはviewport（）。widthをチェックすると、ウィンドウの高さに応じてメディアクエリルールが変更された後、Javascriptが遅く実行される可能性があります。

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

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

if（document.body.clientWidth> = 873）{
//いくつかのコード
}

アンディ・ラングトンのコードは、私にこれを教えてくれました。ありがとう！

1
Jim