僅在小設備上調用jQuery函數

Question

我已經對javascript和jQuery進行了相當新的操作，因此非常感謝。

我設計了a site從手機上，並使用slider來顯示我的小屏幕圖像塊（< 500px）。

所提供的jQuery function放在頭正常工作：

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

但工程所有的時間。

我找到的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

您可以在調整大小事件中運行代碼，像這樣：

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

編織：http://kodeweave.sourceforge.net/editor/#3769a18794a75c3973ad798812bf0ad2

您可以使用.on事件偵聽器中調用函數;有了這個，你可以在.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的東西，現在我不會用它來達到這個特定的目的，但是需要注意。過去，但基本上你有<condition> ? <true-value> : <false-value>。在某些情況下，您可能希望使用ternary operator而不是if else statement。 Here's an example of using a ternary operator for your problem。（我在本演示中使用Vanilla/Pure JS）

希望這會有所幫助。