Html iPad分屏毁了我的网站

我有一个响应网站，用CSS编写，带有媒体查询

我在所有设备上都进行了测试，但在iPad的分屏功能（它以3:1的比例分屏，我在1区域打开我的网站）上，出于某种原因，它显示了更大的媒体查询，它显示了iPad大小的媒体查询，而不是窗口大小的媒体查询，它在iPhone上非常有效。它与小分屏屏幕的大小相同

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

@仅媒体屏幕和（最小设备宽度：1100px）{
#图标{
宽度：1024px；
}
}
@仅介质屏幕和（最大设备宽度：797px）{
html，
身体{
最小宽度：150px；
}
}
@仅介质屏幕和（最大设备宽度：730px）和（最小设备宽度：450px）{
.图标{
左缘：12%；
}
}
@仅介质屏幕和（最大设备宽度：450px）和（最小设备宽度：390px）{
.图标{
左边距：15%；
宽度：14%；
}
}
@仅介质屏幕和（最大设备宽度：390px）和（最小设备宽度：291px）{
.图标{
左缘：9%；
宽度：23%；
}
}

使用最大宽度而不是最大设备宽度，因为设备宽度表示设备的大小，而不是broswer窗口。最小设备宽度也是如此，请使用最大宽度而不是最大设备宽度，因为设备宽度表示设备的大小，而不是broswer窗口。最小设备宽度也是一样的

没关系，我算出来了。 问题是

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

它读取设备宽度而不是当前视口宽度，因此导致问题的原因通过替换为

max width

（希望不会破坏其他内容）将其修复

---

没关系，我知道了。 问题是

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

它读取设备宽度而不是当前视口宽度，因此导致问题的原因通过替换为

max width

（希望不会破坏其他内容）将其修复

---

对于任何示例代码，如果没有HTML，我们都无法做任何事情。请提供一些HTML请。与任何示例代码，我们不能做任何事情没有HTML。请提供一些HTML请。