CSS媒体查询在iPhone上无法工作

Question

我在使用CSS媒体查询时遇到了问题。它们在电脑上很好用，但在我的iPhone上却不起作用。这是我的代码：

@media only screen and (max-width: 400px) {
    .logInCenter{
        width:90%;
        left:0;
        top:0;
        margin-left:0px !important;
    }
}

@media only screen and (min-width: 401px) and (max-width: 768px) {

    .fluid-half
    {
        display:block;
        padding:20px 0px;
        width:100%;
        float:none;
    }

}

@media only screen and (min-width: 769px) and (max-width: 991px) {

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

}

@media only screen and (min-width: 1200px) {

}

问题是我的iPhone只能在第三个媒体查询中检测到样式。 问题是在100％宽度时，它看起来就像任何其他桌面站点。 离得真远。 希望这有意义！谢谢！

- sethcarlton

Answer 1

你确定以下代码已经放置在 HTML head 中吗？它告诉设备查看视口大小。

<meta name="viewport" content="width=device-width">

- Andy Smith

---

我完全忘记了这件事。谢谢提醒，它有效！ - sethcarlton

这个答案应该得到更多的赞和在搜索中更加突出的位置。我也错过了viewport元标记，希望我早点发现这个答案！ - veeTrain

Answer 2

如果你正在使用CSS媒体查询，那么你不应该在HTML文件中使用标签。

你可以在CSS中使用以下代码来设置：

@viewport {
   width: device-width;
   zoom:1;
}

- samtamtam