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

Question

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

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

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

但是，如果您选中“请求桌面站点”选项（我在移动设备上使用 Google Chrome），那么一切都会按预期运行，响应速度和动画效果。

这是为什么呢？

通过网络搜索，我遇到了一个 "viewport" 元标记问题，但它在我的 index.html:

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

Answer 1

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

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

  @media 手持设备、屏幕和（方向：纵向）和（最大宽度：650px）{ ...

• 一个用于移动设备响应，使用：

  @media 手持设备、屏幕和（方向：纵向）和（最大设备宽度：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>