Question

我有一个自适应网站，用CSS编写媒体查询。

我在所有设备上都进行了测试，但是在iPad分屏功能上（它以3：1的比例分割屏幕，我在1区域打开我的网站）从某种原因显示更大的媒体查询，它显示iPad尺寸的媒体查询不是针对窗口大小的，它在iPhone上效果很好，它与小分屏相同。

以下是代码编写方式的示例

@media only screen and (min-device-width: 1100px) {
  #icons {
    width: 1024px;
  }
}
@media only screen and (max-device-width: 797px) {
  html,
  body {
    min-width: 150px;
  }
}
@media only screen and (max-device-width: 730px) and (min-device-width: 450px) {
  .icons {
    margin-left: 12%;
  }
}
@media only screen and (max-device-width: 450px) and (min-device-width: 390px) {
  .icons {
    margin-left: 15%;
    width: 14%;
  }
}
@media only screen and (max-device-width: 390px) and (min-device-width: 291px) {
  .icons {
    margin-left: 9%;
    width: 23%;
  }
}

Answer 1

使用max-width而不是max-device-width作为设备宽度表示设备的大小而不是broswer窗口。同样适用于min-device-width

Answer 2

别介意我弄清楚了。问题是

@media only screen and (max-device-width: ...) and (min-device-width:...)

它读取设备宽度而不是当前视口宽度，因此导致问题的原因是通过替换为max-width来修复它（希望它不会破坏别的东西）

@media only screen and (max-width: ...) and (min-width:...)

iPad分屏破坏了我的网站

2 个答案: