媒体查询不起作用，因为它应该

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的媒体查询和媒体查询。