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浏览器检测的内容，但我觉得我正在尝试做的是在一个较小的规模上。什么是最简单，最无痛的方法呢？

Answer 1

让您的网络服务器检测设备是否是移动浏览器。如果它似乎是移动设备，则重定向到具有内联图像而不是模式的页面的移动版本（并且如果他们不想要，则在底部提供到网站完整版本的链接查看移动内容。）

我如何使用JS移动检测直接提供图像而不是模态？

1 个答案: