小規模デバイスでjQuery関数を呼び出す

Question

javascriptとjQueryにはかなり新しく追加されました。

携帯電話からa siteを設計しました。小さな画面用の画像ブロックを表示するにはsliderを使用しました（< 500px）。

<script> 
jQuery(function($) { 
$('.slider').sss(); 
}); 
</script> 

が、すべての時間を動作します。頭に置い

提供jQuery functionが正常に動作します。

は、私はかなりうまく機能ウィンドウ幅に基づいてヘッドにスクリプトを記述するためのJavaScriptの例を見つけた：

var script = document.createElement('script'); 
script.type="text/javascript"; 

if(window.matchMedia("(max-width:499px)").matches) { 
    jQuery(function($) {$(".slider").sss();}); 
} 

document.getElementsByTagName('head')[0].appendChild(script); 

しかし、これはウインドウサイズ変更に応答しません。ファンクションがロードされると、ファンクションはロードされたままであり、ファンクションをロードするかロードしないかを手動で更新する必要があります。

手動でページを更新しなくても、これを動的に行う方法が必要です。

Answer 1

あなたはこのように、resizeイベントにコードを実行することができます。

function getDeviceDimension() { 
    return { 
     width: $(window).width() 
    }; 
} 

function setSliderSss() { 
    var dd = getDeviceDimension(); 
    if (dd.width < 500) { 
     $('.slider').sss(); 
    } 
} 

$(window).on('load resize', function() { 
    setSliderSss(); 
}); 

Answer 2

だけ異なるように... setInterval()を使用して、簡単な画面検出を作成しました。

$_currentScreenWidth = $(window).width(); 
var screenDetection = setInterval(function() { 
    $_newScreenWidth = $(window).width(); 
    if ($_currentScreenWidth !== $_newScreenWidth) { 
     switch (true) { 
      case ($_newScreenWidth <= 320): /** do something(); */ break; 
      case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): /** do something(); */ break; 
      case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): /** do something(); */ break; 
      case ($_newScreenWidth > 768 && $_newScreenWidth < 960): /** do something(); */ break; 
      case ($_newScreenWidth >= 960): /** do something(); */ break; 
      /** add more screen sizes, and/or adjust the aforementioned accordingly */ 
      default: /** do something(); */ break; 
     } 
    } 
}, 200); // adjust this value to control the interval rate, in milliseconds; the lower the rate, the greater the responsiveness. 

しかしresize()イベントが使用-このような場合のために建設された：

$_currentScreenWidth = $(window).width(); 
$(window).resize(function() { 
    $_newScreenWidth = $(window).width(); 
    if ($_currentScreenWidth !== $_newScreenWidth) { 
     switch (true) { 
      case ($_newScreenWidth <= 320): console.log('<= 320'); break; 
      case ($_newScreenWidth > 320 && $_newScreenWidth <= 480): console.log('> 320 <= 480'); break; 
      case ($_newScreenWidth > 480 && $_newScreenWidth <= 768): console.log('> 480 <= 768'); break; 
      case ($_newScreenWidth > 768 && $_newScreenWidth < 960): console.log('> 768 < 960'); break; 
      case ($_newScreenWidth >= 960): console.log('>= 960'); break; 
      /** add more screen sizes, and/or adjust the aforementioned accordingly */ 
      default: /** do something(); */ break; 
     } 
    } 
}); 

Answer 3

織り：あなたは.onイベントリスナーを使用して関数を呼び出すことができhttp://kodeweave.sourceforge.net/editor/#3769a18794a75c3973ad798812bf0ad2

。これにより、.loadと.resizeを追加し、if else statement$(this).width() < 500の中に.widthと入力すると、モバイル用とデスクトップ用のいずれの要素の.htmlを変更することができます。

ここに簡単な例があります。あなただけのこの効果のためにページをスタイリングしている場合は、ここで

$(window).on("load resize", function() { 
 
    if ($(this).width() < 500) { 
 
    $("[data-action=change]").html("Mobile") 
 
    } else { 
 
    $("[data-action=change]").html("Desktop") 
 
    } 
 
})

body { 
 
    padding: 1em; 
 
    text-align: center; 
 
}

<link href="https://necolas.github.io/normalize.css/4.1.1/normalize.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<h1 data-action="change"> 
 
    Desktop 
 
</h1>

私のアドバイスです。 JSを使用せず、代わりにCSS Media Queriesを使用してください。

contentプロパティを使用してCSSでHTMLコンテンツを変更することはできますが、On/Off switchのような単純なものを作成する場合は、そうすることをおすすめします。

ところでJavaScriptにはConditional (ternary) Operatorという名前のものがありますが、今はこの特定の目的には使用しませんが、注意する必要があります。 I made a video tutorial on it、これまでは、基本的には<condition> ? <true-value> : <false-value>です。場合によっては、if else statement以上のternary operatorを使用することもできます。 Here's an example of using a ternary operator for your problem。（私はこのデモ用にVanilla/Pure JSを使用しています）

希望します。