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

仔細檢查，看看是否有一個視一套。不知道它是否重要，但我總是看到媒體查詢格式如下：

@-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/是一個很好的地方，可以仔細檢查事物的外觀。

Answer 2

嘗試改變這個：

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

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

} 

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

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

}