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上测试时，而不是700px，容器是250px（智能手机横向媒体查询）。我在许多网站上测试过它们，但没有一个能给我正确的容器值（700px）。

然而，我拥有一台小型计算机（更具体的东芝笔记本电脑），我测试了那里的网站，当它应该是250px时容器是700px！

谁能告诉我发生了什么事？

Answer 1

我认为问题在于：

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

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

} / *智能手机（肖像）----------- * /

你没有这里的上限条件，即max-width：500px，浏览器混合了iPad的媒体查询和媒体查询。

媒体查询无法正常工作

1 个答案: