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

Question

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

Answer 1

在您的头部部分包含此元标记

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

Answer 2

回答：

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

Answer 3

对 OP 的帮助：

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