Html 使响应性网站适合移动应用的提示

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

我遇到的问题是，当我在笔记本电脑上以手机分辨率进行设计和更改时，一切正常（见第一张图），但当我在手机上实际加载网站时，我得到的视图与从笔记本电脑获得的视图不一样（见第二张图）

我用过

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

设置移动设备的宽度

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

我只是想知道是否有更简单的方法来为移动设备创建响应性视图，比如使用Phonegap之类的应用程序，或者是否有人可以给我一些关于如何为移动设备正确创建响应性内容的提示

提前谢谢

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

我建议观看新的波士顿响应式网页设计播放列表： 他将教你使用百分比进行响应式设计的重要基本概念，并在响应式移动版本中创建自己的自定义菜单或按钮（这使其几乎像浏览器中的移动应用程序）

---

你应该考虑使用Bootstrap。它是一个移动第一前端框架，用于更快、更简单的web开发 @John Appleseed
使用检查员 “切换设备模式”或“Ctrl+Shift+M” 当你尝试你的网站

而不仅仅是调整页面大小

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

---

欢迎光临。我希望这有帮助。