如何僅在手機上創建HTML5滑塊，否則jQuery UI

Question

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 


<script> 
$(function() { 
    $("#slider").slider({ 
     slide: function(event, ui) { 
      if (ui.value < 33) { 
       $("#1").fadeIn("slow"); 
       $("#2").fadeOut("slow"); 
       $("#3").fadeOut("slow"); 
      } 
      else if (ui.value < 66) { 
       $("#1").fadeOut("slow"); 
       $("#2").fadeIn("slow"); 
       $("#3").fadeOut("slow"); 
      } 
      else { 
       $("#1").fadeOut("slow"); 
       $("#2").fadeOut("slow"); 
       $("#3").fadeIn("slow"); 
      } 
     } 
    }); 
}); 
</script> 

<div id="slider"></div> 

<div id="content" > 
    <div id="1" style="position:absolute;z-index:0;">A</div> 
    <div id="2" style="position:absolute;z-index:1;display:none;">B</div> 
    <div id="3" style="position:absolute;z-index:2;display:none;">C</div> 
</div> 

上面的代碼使用jQuery UI創建滑塊。滑塊在3個不同div的內容之間淡化。代碼在電腦上很棒，但是它創建的滑塊不會在手機上滑動。什麼是移動做工精細如下：

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"></link> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
    function changecontent() 
     { 
     if (document.getElementById("slider").value<33){ 
      $("#1").fadeIn("slow"); 
      $("#2").fadeOut("slow"); 
      $("#3").fadeOut("slow"); 
     } else if (document.getElementById("slider").value<66){ 
      $("#1").fadeOut("slow"); 
      $("#2").fadeIn("slow"); 
      $("#3").fadeOut("slow"); 
     } else if (document.getElementById("slider").value>66){ 
      $("#1").fadeOut("slow"); 
      $("#2").fadeOut("slow"); 
      $("#3").fadeIn("slow"); 
     } 
    }; 
</script> 

<input type="range" name="slider" id="slider" value="0" min="0" max="100" onchange="changecontent()"/> 
<div id="content"> 
    <div id="1" class="show" style="position:absolute;z-index:0;">A</div> 
    <div id="2" class="hide" style="position:absolute;z-index:1;">B</div> 
    <div id="3" class="hide" style="position:absolute;z-index:2;">C</div> 
</div> 

上面的代碼「作品」在所有瀏覽器（手機或沒有），但允許不時尚選擇，看起來在每個瀏覽器不同。我很喜歡它在移動設備上的顯示效果，但討厭它在IE上的外觀，並且討厭它在Firefox上的功能。

任何JS/jQuery大師足夠熟練地結合這些，以便網站可以根據屏幕分辨率/設備查看其中的一個嗎？我也接受其他選擇。但是由於JS與我使用的模板衝突，我無法使用jQuery Mobile。 jQuery UI工作正常。

Answer 1

包括http://touchpunch.furf.com/ jqueryui應該修復你的問題後。它修改jqueryui以支持觸摸事件。默認情況下，jqueryui只支持鼠標事件。

Answer 2

這裏有一個小的調整，可能會爲你工作： http://www.fourfront.us/blog/jquery-window-width-and-media-queries

如果#slider變化有一定的CSS屬性，因爲用戶查看它在移動設備上，你可以趕上並應用不同的JavaScript部分到你的滑塊。

它似乎比通過JS獲取窗口/設備更安全。