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

Question

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

Answer 1

在您的头部

中加入此元标记

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

Answer 2

帮助了OP：

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

Answer 3

答案：

主要问题在于Bootstrap。
我不是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中。