Javascript 如何使用JS mobile detection直接提供图像服务，而不是以模式提供？

我正在建立一个餐厅的网站，并通过TW引导将菜单作为图像加载到modals中。代码如下所示：

          <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浏览器检测的文章，但我觉得我要做的只是规模小一些。最简单、最无痛的方法是什么

让web服务器检测设备是否为移动浏览器。如果它看起来是移动设备，则重定向到页面的移动版本，该页面将图像内联，而不是以模式显示（并且，在底部提供指向网站完整版本的链接，以防他们不想看到移动内容）