1

これは本当にこれと同じ質問ですが、誰かがもっと徹底的に答えてくれることを願っています。

2つの異なるjs関数を使用して、サイトの「モバイル」バージョンと「フル」バージョンを作成しようとしています。私はレスポンシブデザインを理解しており、CSSを介してほとんどの変更を行っていますが、2つのバージョンには2つの異なる相互に排他的なjs関数が必要です。Enquire.jsはメディアクエリの使用を許可し、ブラウザウィンドウのサイズが変更されていない場合はうまく機能します。ただし、ウィンドウのサイズを「full」から「mobile」に変更すると、以下の最善の（おそらくあまり良くない）努力にもかかわらず、私の例の関数full（）は実行を停止しません。ただし、アラートは常に正しいです。full（）の場合は「true」、mobile（）の場合は「false」で、関数はifステートメントを無視しているように見えます。より良いオプションがある場合は、inquireを使用しなくても大丈夫です。

js-decider.js

$(function() {

window['fullEnabled'];
window['mobileEnabled'];

enquire.register("screen and (min-width:680px)", {

match : function() {

 window['fullEnabled'] = true;
 window['mobileEnabled'] = false;
 full();

}

}).register("screen and (max-width:679px)", {

match : function() {

 window['fullEnabled'] = false;
 window['mobileEnabled'] = true;
 mobile();

}

}).listen();

});

full.js

function full() {

    if (window['fullEnabled']==true) {
        alert(window['fullEnabled']);
        // do other stuff
    }

}

mobile.js

function mobile() {

    if (window['mobileEnabled']==true) {
        alert(window['fullEnabled']);
        // do other stuff
    }

}
4

1 に答える 1

0

クロス オーバーの問題は、メディア クエリが原因のようです。

代わりにこれを試してください：

enquire.register("screen and (max-width:679px)", {
    match : function() {
        //small screen
    }
}).register("screen and (min-width:680px)", {
    match : function() {
        //large screen
    }
}).listen();
于 2013-04-06T10:16:24.943 に答える