2

私の CSS には、次のようなメディア クエリがあります。

@media (min-width: 800px) { /* styles */ }

次に、私の jQuery で、ウィンドウの幅をターゲットにして、いくつかのアクションを実行しています。

編集:以下の回答に従って、この関数を変更しましたが、JS と CSS はまだ調整されていません。この問題は、受け入れられた回答で指定されているように Modernizr 関数を使用することで修正されました。

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

問題は、jQuery が 800px 以上で bang を実行している間に、CSS が 740px で起動していることです。

これらが一致しないという既知の問題はありますか? または、私のページに CSS に影響を与える何かがあり、なぜそれが 800px ではなく 740px なのですか? の代わりに使用する必要があるものがあるかもしれません$(window)。

編集: Safari でテストしましたが、完全に動作します。Chrome と Firefox では、jQuery 関数は 800px まで正確に実行され、CSS も同様です。しかし、Chrome では、メディア クエリが 800px であっても、CSSは実際には 740px の後に実行されます。これらを完全に揃えるにはどうすればよいでしょうか?

4

5 に答える 5

3

Modernizrを使用して JSでメディア クエリを実行mq()できます (メソッドはブール値を返します)。

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});
于 2012-08-16T20:39:55.200 に答える
2

幅チェックを移動しないと、viewportWidth変数は常に同じになります。

$(window).resize(function() {
    var viewportWidth = $(this).width();
    if (viewportWidth >= 800) {
        // do something
    }
});
于 2012-08-16T20:39:42.493 に答える
2

有効なコードは次のとおりです。

$(window).resize(function() {

    var viewportWidth = $(window).width();

    if (viewportWidth >= 800) {
        // do something
    }
});

ウィンドウのサイズが変更されるたびに、新しい値がviewportWidth変数に格納されます。あなたのコードでは、ページが読み込まれviewportWidthたときの唯一の値を取得します。$(window).width()

于 2012-08-16T20:43:39.990 に答える
1

スティーブの答えに同意します。jquery(window).width(); これはメディア クエリと一致せず、正確なウィンドウ幅のサイズも提供しません。これが、Steve から取得して変更した私の回答です。

CSS :
        @media (max-width: 767px) {

           //define your class value, anything make sure it won't affect your layout styling
           .open {
            min-width: 1px !important;
           }
        } 

        .open {
              min-width: 2px;
        }

JS :

// when re-sizing the browser it will keep looking for the min-width size, if the media query is invoked the min-width size will be change.

$(window).on('resize orientation', function() {

    var media = $('.open').css('min-width');

    if( media == '1px') // means < 767px 
    {       
        // do your stuff
    }

});

それだけです〜お役に立てば幸いです。

于 2014-01-14T05:35:10.027 に答える
1

私が試したのは、CSS メディア クエリを使用してオブジェクトのスタイルを設定し、JavaScript を使用してオブジェクトにそのスタイルがあるかどうかをテストすることです。Javascript は、ページの 2 つの部分で個別に判断するのではなく、CSS に答えを尋ねています。

CSS:

@media (min-width: 800px) {  
    #viewType {width:3px;}
}

HTML :

<div id="viewType" style="display:none"></div>

JavaScript:

var answer = ($("#viewType").width()==3)
于 2013-06-12T20:35:07.780 に答える