iphone - 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% 宽度下，它看起来就像任何其他桌面站点一样。真的很远。我希望这是有道理的!谢谢!

Answer 1

您确定以下代码在您的 HTMl head 中吗？告诉设备查看视口(viewport)大小。

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