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

Posted 2023-03-07

【中文标题】基于响应式 Bootstrap 的网页在移动设备上显示效果不佳

【英文标题】：Responsive Bootstrap based webpage not displaying well on mobile devices

【发布时间】：2015-11-22 10:19:27

【问题描述】：

我开发了一个响应式网页，并使用 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">

【问题讨论】：

移动浏览器似乎忽略了您的display: inline-flex; 声明。 @media (max-width: 767px) .idioma display: inline-flex; vertical-align: middle; margin-left: 30%;

@ChrisYongchu 不是让我担心的代码部分，它显示得很好。都是 de javascript、HTML 转换以及主页图像和文本。您可以通过启用/禁用“请求桌面站点”选项来查看差异。

【参考方案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>

【讨论】：

如果它解决了您的问题，请将其标记为正确答案。谢谢！