html - 放大 Bootstrap 移动设备

Question

我正在为我的一个客户(该网站使用的是 Bootstrap 2)整合响应能力，但我遇到了问题。当我在我的移动设备 (HTC X8) 上访问该网站时，我注意到它并没有真正放大到看起来不错的位置。

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

---

---

不过，我希望它能放大一些。就像您在浏览器中缩小时的样子。

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

我真的很感激任何和所有的帮助。

Answer 1

大多数移动设备都使用所谓的“虚拟视口(viewport)”。从本质上讲，这意味着即使设备本身与普通笔记本电脑/台式机显示器相比相对较小，它仍然以高分辨率显示。例如，较新版本的 iPhone 和 iPad 都以 980 像素的虚拟视口(viewport)显示。因此，即使您有一个在 768 像素和 980 像素处设置断点的 Bootstrap 2 响应式网站，您的手机实际上还是在桌面或平板电脑版本上显示该网站，因为它的虚拟视口(viewport)很可能高于其实际视口(viewport)。

您需要做的是检测手机(如果您愿意，还可以选择平板电脑)并告诉文档在用户使用移动设备时呈现视口(viewport)缩放。

在您的 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。根据您的页面，您可能想要使用这些值来查看哪些值最适合您的网站。