html – 放大Bootstrap mobile

2019年7月21日 178次阅读

我正在为我的客户(该网站正在使用Bootstrap 2)整理响应,但我遇到了问题.当我在我的移动设备(HTC X8)上访问该网站时,我注意到它并没有真正放大到它看起来不错的地方.

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

但是,我希望它更加放大.就像它在浏览器中缩小时的样子一样.

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

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

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

您需要的是检测手机(以及您选择的平板电脑)并告诉文档在用户使用移动设备时渲染视口缩放.

在HTML头标记中,添加以下内容

<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.您可能希望使用这些值来查看哪些值最适合您的站点,具体取决于您的页面.

点赞