1

JavaScript とメディア クエリで何かを試していました。要素の切り替えなど、JavaScriptでいくつかの要素を変更したい.

ブラウザ/デバイスの幅が 320px の場合、何かしたいです。

私は次のことを思いつきましたが、これはうまくいきません：

if (screen.width < 320){ 
    $('input[type="text"]').insertAfter('label');
    $('input[type="text"]').eq(1).remove();
    $('input[type="text"]').eq(2).remove();             
}

私は何を間違っていますか？

CSS のいくつかの変更に対してこれを実行したい場合は、次のようになります。

@media only screen and (max-width : 400px) { }

上記の例を JavaScript に変換します。

4

4 に答える 4

2

JavaScript 内でメディア クエリを呼び出すことができます。

function resize() {
    if (window.matchMedia('only screen and (max-width: 400px)').matches) {
        document.body.style.background = 'red';                   
    } else if (window.matchMedia('only screen and (min-width: 401px) and ' +
                                 '(max-width: 600px)').matches) {
        document.body.style.background = 'blue';
    } else {
        document.body.style.background = 'yellow';               
    }
}

window.addEventListener('resize', resize, false);
resize();
于 2013-03-28T09:59:03.617 に答える
1

はい。$(window).width()を使用してこれを行うことができます。

if ($(window).width() < 320) {    
  $('input[type="text"]').insertAfter('label');
  $('input[type="text"]').eq(1).remove();
  $('input[type="text"]').eq(2).remove();
}

また、リフレッシュせずにサイズ変更が行われたかどうかを確認したい場合は、$(window).resize()を使用します。

これは、使用中のサイズ変更のjsFiddleの例です。

于 2013-03-28T09:48:03.373 に答える
1

以下の URL を参照してください。

Phonegap - 信頼できるページ幅検出?

Navigator オブジェクトを使用して、jquery でデバイスを検出できます。

于 2013-03-28T09:56:24.267 に答える
0

はい、できます。メディア クエリは CSS に最適ですが、デバイスのサイズに基づいて js をロードする必要がある場合もあります。

ポール アイリッシュによって書かれたメディア マッチは、これを行うための優れたツールです。これは、機能検出ライブラリであるModernizrで使用されます。

于 2013-03-28T09:59:23.133 に答える