CSS Media Queries无法在iPhone上运行

时间:2013-10-12 19:26:58

标签: iphone css media

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

2 个答案:

答案 0 :(得分:10)

您确定以下代码在您的HTMl头中吗?告诉设计查看视口大小。

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

答案 1 :(得分:2)

由于您使用的是css媒体查询,因此不应在html文件中使用元标记。 您可以使用以下命令在css中设置相同的内容:

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