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

Question

首先，我为巨大的图片道歉。

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

这就是我希望我的网站出现在手机上的方式。但是当我将它加载到我的 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 -宽度为 568 像素。我相信它也是视网膜，所以你可能也需要and (-webkit-min-device-pixel-ratio: 2)在那里。

Answer 2

在我看来这可能是视口问题？

尝试放置：

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

进入你的 html 的头部。