响应式网页设计css媒体查询和Iphone不同的分辨率

Question

我在我的应用程序上使用媒体查询，它似乎运行良好并且在http://www.responsinator.com/中很好地显示但是当我在真正的iPhone 4中查看时，我的网页根本不可读。它看起来都放大了。

试图找出实际原因，似乎Responsinator将iPhone 4分辨率显示为320 x 480，而此网站http://www.iphoneresolution.com/显示为640×960。我的iPhone看起来是640×960。我应该如何在CSS媒体查询中处理这些情况？

Answer 1

将视口元标记添加到html文件的head区域：

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

此代码可使您的网站正常扩展。