我正在为我的一个客户整合响应能力(该网站使用的是 Bootstrap 2),但我遇到了问题。当我在我的移动设备 (HTC X8) 上访问该站点时,我注意到它并没有真正放大到看起来不错的位置。
这是我正在使用的链接,以及我手机上的结果:http://www.gigee.me/draft/index.php?/account/login(,如果该站点将您重定向到 gigee.me
, 输入 /draft/index.php?/account/login
并且它应该可以工作 )
但是,我希望它更放大。就像在浏览器中缩小时的样子。
我认为这可能是一个简单的修复。我相信我的大部分 HTML 和 CSS 都是正确的。
我真的很感激任何和所有的帮助。
最佳答案
大多数移动设备使用所谓的“虚拟视口(viewport)”。从本质上讲,这意味着即使与普通笔记本电脑/台式机显示器相比,设备本身相对非常小,但它仍能以高分辨率显示。例如,较新版本的 iPhone 和 iPad 都以 980 像素的虚拟视口(viewport)显示。因此,即使您有一个 Bootstrap 2 响应式网站,断点位于 768 像素和 980 像素,但您的手机实际上是在桌面或平板电脑版本中显示该网站,因为它的虚拟视口(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。根据您的页面,您可能希望使用这些值来查看哪些值最适合您的站点。
关于html - 在 Bootstrap 移动设备上放大,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20361466/