聚焦于Bootstrap移动端

Question

我正在为我的客户（该网站使用Bootstrap 2）制作响应式设计，但是我遇到了一个问题。当我在我的移动设备（HTC X8）上访问该网站时，我注意到它没有真正缩放到看起来很好的位置。

这里是我正在使用的链接以及我手机上的结果：http://www.gigee.me/draft/index.php?/account/login（如果该网站将您重定向到gigee.me，请键入其余部分/draft/index.php?/account/login，然后它应该可以工作）。

但是，我希望它能够更加缩放。就像在浏览器中缩小时的样子一样。

我认为这可能是一个简单的修复。我相信我的HTML和CSS大部分都是正确的。

我非常感谢任何和所有对此的帮助。

- Keenan Payne

---

在iOS上，对我来说似乎被放大了 - Last1Here

真的吗？嗯，我想知道为什么这只发生在我的Windows 8手机上..非常感谢您让我知道。 - Keenan Payne

可能是与CSS媒体查询和屏幕宽度有关，只是瞎猜而已，没有您的代码和屏幕尺寸很难确定。 - Last1Here

Answer 1

大多数移动设备使用所谓的“虚拟视口”。这意味着，即使与常规笔记本电脑/台式机显示器相比，设备本身相对非常小，但仍以高分辨率显示。例如，iPhone和iPad的新版本都显示为980px的虚拟视口。因此，即使您在768px和980px处具有断点的Bootstrap 2响应式网站，您的手机实际上也是以桌面或平板电脑版本显示网站，因为其虚拟视口很可能高于其实际视口。

您需要做的是检测手机（和平板电脑，如果您选择）并告知文档在用户使用移动设备时呈现视口缩放。

在HTML head标签中添加以下内容：

<meta name = "viewport" id = "viewport_device">

在jQuery库引用后，包含以下JavaScript代码：

    if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Android/i)
    || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/IEMobile/i)){
        $("#viewport_device").attr("content", "initial-scale = 0.50");
    }
    else if(navigator.userAgent.match(/iPad/i)){
        $("#viewport_device").attr("content", "initial-scale = 1.00");
    }

IF语句将检测所有主要的移动浏览器。如果检测到手机，则初始比例设置为0.50。这实际上是告诉浏览器缩放50%。如果检测到iPad，则初始比例设置为1。根据您的页面，您可能需要尝试不同的值，以确定哪些值最适合您的网站。

- Lloyd Banks