响应式网站在移动浏览器中看起来不同

Posted 2023-03-06

【中文标题】响应式网站在移动浏览器中看起来不同

【英文标题】：Responsive website looks different in mobile browser

【发布时间】：2015-05-30 04:48:03

【问题描述】：

我正在为 480px 到 768px 宽屏开发网站。当我在浏览器宽度为 480 像素的 PC Chrome 上查看网站时，它看起来很完美。但是当我使用 Chrome 浏览器在移动设备上看到分辨率为 720x1280 的同一个网站时，它看起来很奇怪。

【参考方案1】：

在您的 head 部分中包含此元标记

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

【参考方案2】：

帮助 OP：

虽然移动设备的分辨率为 720x1280，但当它的宽度为 queried 时，设备可能会声明其他情况。设备的宽度（以 px 为单位）可以与分辨率（以 px 为单位）不同。

【讨论】：

我应该开发可以支持最小 320px 的网站。我正在为 480px 开发。我还发现我的设备的像素宽度为 360 像素，分辨率为 720 像素。应考虑像素密度。

@NizamKazi 我遇到了同样的问题，我无法理解...你是如何解决这个问题的？

@Y.R 请参考我在回答中分享的链接。

【参考方案3】：

回答： 主要问题在于引导程序。 我不是 Bootstrap 方面的专家。但是我看到的问题是您的一半代码无法正常工作。当我查看页面源代码时，未显示页脚中的特定部分。 我认为问题出在 Bootstrap 类上。 我在 Bootstrap 3 中找不到很多可用的类，例如 footer-nav、bigtext、icon-box、color-blue、footer-social pull-left 等等。 也许您需要查看完整的 Bootstrap 3 Classes 参考： https://gist.github.com/mrcybermac/9175466 另外我认为您过度使用 container-fluid 。尝试使用 container ，因为我们无法为我们制作的每个元素分配全宽。并确保不要将一个container 嵌套在另一个container 中。

【讨论】：

感谢您的回复，我的问题不是那些css或布局。我编写了这些 CSS 来自定义引导模板的默认外观。我的问题是当我通过调整大小在桌面浏览器上看到网站时，它看起来很完美。但在具有相同宽度的移动浏览器上看起来不一样。

好的。我明白了你的意思，但你使用的 css (main.css) 仍然无法正常工作。当您调整桌面浏览器窗口的大小时，它看起来并不完美。所以，也许你应该更好地利用 main.css 中的媒体查询来让它正确。