媒體查詢不起作用，因爲它應該

Question

我測試我的網站在不同的屏幕和設備上，除了Ipads以外，所有的工作都很好。

媒體查詢是這樣的：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
    .container { 
     width: 250px; 
    } 
} 
/* Smartphones (landscape) ----------- */ 

@media only screen and (min-width: 321px) { 
    .container { 
     width: 250px; 
    } 
} 
/* Smartphones (portrait) ----------- */ 

@media only screen and (max-width: 320px) { 
    .container { 
     width: 250px; 
    } 
} 
/* iPads (portrait and landscape) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    .container { 
     width: 700px; 
    } 
} 
/* iPads (landscape) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { 
    .container { 
     width: 700px; 
    } 
} 
/* iPads (portrait) ----------- */ 

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { 
    .container { 
     width: 700px; 
    } 
} 

當我測試了在iPad上，而不是700像素，容器是250像素（智能手機景觀媒體查詢）。我已經在很多網站上測試過它們，並且它們都沒有給我正確的容器值（700px）。

但是，我擁有一臺小型計算機（東芝筆記本電腦更具體），我在那裏測試了網站，當它應該是250像素時，容器是700px！

誰能告訴我發生了什麼事？

Answer 1

我認爲這個問題是在這裏：

/* Smartphones (landscape) ----------- */ 

@media only screen and (min-width: 321px) { 
    .container { 
     width: 250px; 
    } 

} /*智能手機（縱向）----------- */

你沒有在這裏上條件，即最大寬度：500px和瀏覽器混合iPad的媒體查詢和媒體查詢。