1

我正在建立一家餐厅的网站，并通过 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 浏览器检测的内容，但我觉得我想做的只是规模较小。最简单、最无痛的方法是什么？

4

1 回答 1

2

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

于 2012-10-04T20:34:41.813 回答