Question

我目前正在尝试使用CSS媒体查询来优化我的网站以获取移动视图，并且正在使用带有扩展程序的Google Chrome来调整桌面上的视口大小以调整我的移动内容。

我遇到的问题是当我在移动电话分辨率下设计和更换我的笔记本电脑时，一切正常（见第一张图片）但是当我实际在我的手机上加载网站时，我没有得到与笔记本电脑相同的观点（见第二张图）。

我用过

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

设置我的移动

的宽度

我知道字体不同，因为它是我安装到笔记本电脑上的第三方，所以这不是问题所在。

只是想知道是否有更简单的方法来实际为移动设备创建响应式视图，例如使用Phonegap等应用程序，或者是否有人可以提供有关如何正确创建移动设备的响应内容的提示。

提前致谢

编辑：第二张图片更大，因为它是我手机的截图，屏幕尺寸没有什么不同。

Answer 1

我建议观看新波士顿的响应式网页设计播放列表：

他将使用百分比教您响应式设计的重要基本概念，并在响应式移动版本中创建自己的自定义菜单或按钮（这使其几乎像浏览器中的移动应用程序）。

Answer 2

你应该考虑使用bootstrap。它是一个移动的第一个前端框架，用于更快，更轻松的Web开发 http://getbootstrap.com

Answer 3

@John Appleseed
使用Inspector “切换设备模式”或“Ctrl + Shift + M” 你尝试网站的时间

而不仅仅是调整页面大小

我不知道你的CSS，但看看这个