CSS 媒体查询被忽略

Question

我希望我的页面在 iphone4 和 iphone 5 上看起来不错。我写了一些媒体查询，但它们似乎被忽略了:

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

#gpsMain{
    position:absolute;
    top:25px;
    left:20%;
}

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

#gpsMain{
    position:absolute;
    top:11px;
    left:20%;
}

}

为什么没有应用样式？这是获取两部 iPhone 分辨率的正确方法吗？

(查询是我在css文档上写的最后一件事)

Answer 1

仔细检查您是否设置了视口(viewport)。不确定这是否重要，但我总是看到格式如下的媒体查询:

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}

@media screen and (max-width: 400px) {
    .list-view .site-content .post-thumbnail { background: none; width: auto; z-index: 2; }
}

这是来自 2014 年的 wordpress 主题。 http://www.responsinator.com/是仔细检查事物外观的好地方。