我如何使用JS移動檢測直接提供圖像而不是模式？

Question

我正在建造一家餐廳的網站，並通過TW Bootstrap將其菜單加載爲模版圖片。代碼如下所示：

  <div id="menu" class="modal hide fade in" style="display: none; "> 
       <div class="modal-header"> 
       <a class="close" data-dismiss="modal">×</a> 
       </div> 
       <div class="modal-body"> 
       <img src="assets/menus/brunch.jpg"> 
       </div> 
      </div> 
      <a data-toggle="modal" href="#menu" >BRUNCH</a></p> 

這個工作在桌面瀏覽器不錯，但在移動瀏覽器，圖像的大小，使滾動和縮放那種尷尬。客戶端想要在移動設備上取消該模式，並在用戶單擊菜單鏈接時將該圖像加載到新頁面中。

我讀過一堆關於媒體查詢和javascript瀏覽器檢測的東西，但我覺得我想要做的是在wayyy更小的規模。什麼是最簡單，最痛苦的方式來做到這一點？

Answer 1

讓您的網絡服務器檢測設備是否爲移動瀏覽器。如果它看起來像是移動設備，則重定向到具有圖像內嵌圖像的移動版本，而不是以模式（而且，如果不想要，則在網站的底部提供一個鏈接到完整版本看到移動內容）。