css - 移动设备的媒体查询不起作用

Question

我第一次尝试在我的 CSS 中使用媒体查询，但我似乎没有太多运气让它工作。

为了测试，我希望我的#page-wrap 在 iPhone 之类的东西正在查看页面时调整为 440 像素，但没有任何变化。这是我用过的。

@media only screen and (max-device-width: 480px) { #page-wrap {width:440px;} }

我也把它放在我的标题中。

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

它是否正确？

Answer 1

您使用有特定原因max-device-width吗？与 不同max-width的是，它不会帮助人们旋转他们的设备或进行其他类型的调整。

相反，坚持使用max-width，如下所示：

@media only screen and (max-width: 300px) { 
    #page-wrap {
        width:100px;
    } 
}

查看说明它的这个jsFiddle 。

Answer 2

试试这个你的媒体查询：

@media only screen and (max-width: 480px) {}