jquery - $(window).width() はメディアクエリと同じではありません

Question

プロジェクトで Twitter Bootstrap を使用しています。デフォルトのブートストラップスタイルに加えて、独自のスタイルもいくつか追加しました。

//My styles
@media (max-width: 767px)
{
    //CSS here
}

ビューポートの幅が 767px 未満の場合、jQuery を使用してページ上の特定の要素の順序を変更しています。

$(document).load($(window).bind("resize", checkPosition));

function checkPosition()
{
    if($(window).width() < 767)
    {
        $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar"));
    } else {
        $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar"));
    }
}

私が抱えている問題は$(window).width()、CSS によって計算された幅と CSS によって計算された幅が同じに見えないことです。767を$(window).width()返すと、CSS はビューポートの幅を 751 と計算するため、16px の違いがあるようです。

これを引き起こしている原因と、問題を解決する方法を知っている人はいますか? 人々は、スクロールバーの幅は考慮されておらず、使用する$(window).innerWidth() < 751ことが道であると示唆しています。ただし、理想的には、スクロールバーの幅を計算し、メディアクエリと一致するソリューションを見つけたいと考えています (たとえば、両方の条件が値 767 に対してチェックしている場合)。すべてのブラウザーのスクロールバーの幅が 16px になるわけではないのでしょうか?

score 317 · Accepted Answer

IE9 をサポートする必要がない場合は、そのまま使用できますwindow.matchMedia()( MDN ドキュメント)。

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

window.matchMediaCSS メディアクエリと完全に一致しており、ブラウザのサポートは非常に優れています: http://caniuse.com/#feat=matchmedia

アップデート：

より多くのブラウザーをサポートする必要がある場合は、Modernizr の mq メソッドを使用できます。これは、CSS のメディアクエリを理解するすべてのブラウザーをサポートします。

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

score 187 · Accepted Answer

メディアクエリが変更される CSS ルールを確認します。これは常に機能することが保証されています。

http://www.fourfront.us/blog/jquery-window-width-and-media-queries

HTML:

<body>
    ...
    <div id="mobile-indicator"></div>
</body>

Javascript:

function isMobileWidth() {
    return $('#mobile-indicator').is(':visible');
}

CSS:

#mobile-indicator {
    display: none;
}

@media (max-width: 767px) {
    #mobile-indicator {
        display: block;
    }
}

score 4 · Accepted Answer

4

使用する

window.innerWidth

これは私の問題を解決しました

于 2015-01-13T21:23:50.323 に答える

score 3 · Accepted Answer

これは、CSS を介して何かを変更し、Javascript を介してそれを読み取ることに依存する、前述の方法に代わるものです。window.matchMediaこの方法は、Modernizrを必要としません。また、追加の HTML 要素も必要ありません。HTML疑似要素を使用してブレークポイント情報を「保存」することで機能します。

body:after {
  visibility: hidden;
  height: 0;
  font-size: 0;
}

@media (min-width: 20em) {
  body:after {
    content: "mobile";
  }
}

@media (min-width: 48em) {
  body:after {
    content: "tablet";
  }
}

@media (min-width: 64em) {
  body:after {
    content: "desktop";
  }
}

例として使用bodyしましたが、これには任意の HTML 要素を使用できます。content任意の文字列または数値を疑似要素に追加できます。「モバイル」などである必要はありません。

これで、次の方法で Javascript からこの情報を読み取ることができます。

var breakpoint = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/"/g,'');

if (breakpoint === 'mobile') {
    doSomething();
}

この方法では、ブレークポイント情報が CSS から直接取得され、Javascript を介して適切な画面幅を取得する手間がかからないため、ブレークポイント情報が正しいことを常に確認できます。

score 1 · Accepted Answer

メディアクエリを処理するための、それほど複雑ではないトリックを次に示します。クロスブラウザーのサポートは、モバイル IE をサポートしていないため、少し制限があります。

     if (window.matchMedia('(max-width: 694px)').matches)
    {
        //do desired changes
    }

詳細については、 Mozilla のドキュメントを参照してください。

score 0 · Accepted Answer

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

body に div を追加する

<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)');
}

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

score 0 · Accepted Answer

これを試して

getData(){
    if(window.innerWidth <= 768) {
      alert('mobile view')
      return;
    }

   //else function will work

    let body= {
      "key" : 'keyValue'
    }
    this.dataService.getData(body).subscribe(
      (data: any) => {
        this.myData = data
      }
    )
}

score -2 · Accepted Answer

これを試して

if (document.documentElement.clientWidth < 767) {
   // scripts
}

詳細については、ここをクリックしてください

score -2 · Accepted Answer

滑らかなスライダーを実装し、解像度に応じてブロック内に異なる数のスライドを表示します (jQuery)

   if(window.matchMedia('(max-width: 768px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
        dots: true,
      });
    }

    if(window.matchMedia('(max-width: 1024px)').matches) {
      $('.view-id-hot_products .view-content').slick({
        infinite: true,
        slidesToShow: 4,
        slidesToScroll: 4,
        dots: true,
      });
    }

jquery - $(window).width() はメディアクエリと同じではありません

18 に答える 18

アップデート：

Related

Reference