基于响应 Bootstrap 的网页在移动设备上显示不佳

Question

我开发了一个响应式网页，并使用 Chrome 扩展程序 "Responsive Web Design Tester" 在我的计算机上针对不同设备使用多种不同像素分辨率对其进行了测试。

它在我的电脑上完全响应，但当我在我的移动设备 (LG Nexus 5) 上打开它时，它没有按预期显示。所有响应都是通过 Bootstrap 类和媒体查询实现的。

如果您在移动设备上输入 http://www.danigarcia-dev.com，您会看到元素错位，甚至元素转换和 jQuery 都不起作用。

但是如果您选中 "Request Desktop Site" 选项（我在我的移动设备上使用 Google Chrome），那么一切都会按预期运行，响应速度和动画。

这是为什么？

通过网络搜索，我遇到了 "viewport" 元标记问题，但它被定义为预计在我的 index.html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

最后，我将媒体查询 CSS 文件分成了两个不同的文件：

一个用于桌面响应，使用：

@media handheld, screen and (orientation: portrait) and (max-width: 650px) { ...
一个用于移动设备响应，使用：

@media handheld, screen and (orientation: portrait) and (max-device-width: 650px) { ...

然后我使用 http://detectmobilebrowsers.com/ 脚本来检测网页是否在移动设备中打开，并加载相应的 CSS 样式表：

<script src="assets/js/detectmobilebrowser.js"></script>

<script>
    var element = document.createElement("link");
    element.setAttribute("rel", "stylesheet");
    element.setAttribute("type", "text/css");
    if (jQuery.browser.mobile){
        element.setAttribute("href", "assets/css/media-query-mobile.css");
    } else {
        element.setAttribute("href", "assets/css/media-query-desktop.css");
    }
    document.getElementsByTagName("head")[0].appendChild(element);
</script>

基于响应 Bootstrap 的网页在移动设备上显示不佳

Responsive Bootstrap based webpage not displaying well on mobile devices

jquery

viewport

media-queries

responsive-design

twitter-bootstrap