CSS媒体查询n00b，如何正确指定元素高度？

Question

首先，我为这些巨大的照片道歉。

我是媒体查询的新手。以下是我在浏览器中测试并将窗口宽度设置为320px时我的网站的外观：

这就是我希望我的网站出现在手机上的方式。但是当我在iPhone上加载它时，它看起来像这样：

以下是我正在使用的查询：

@media only screen and (min-device-width : 320px) 
    and (max-device-width : 480px), 
    screen and (max-width : 850px) {

显然，这是因为iPhone的宽度远大于320px。当设备具有第二张图像的分辨率时，如何使我的网站看起来像第一张图像？

Answer 1

假设您正在使用iPhone 5.我对此没有太多经验，但根据我在http://www.stephentgilbert.com/mediaqueries/#iPhone阅读的内容，我会尝试将max-device-width更改为568px。我相信它也是视网膜，所以你可能也需要and (-webkit-min-device-pixel-ratio: 2)。

Answer 2

在我看来它可能是一个视口问题？

尝试推杆：

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

进入你的HTML头部。