如何为笔记本电脑 1024px 和 ipad 1024px 宽度设置不同的媒体查询？

Question

我想为 1024px 宽度的屏幕设置不同的媒体查询，具体取决于它是笔记本电脑屏幕还是 iPad 屏幕。

例如，如果有人在笔记本电脑（宽度：1024px）中查看我的网站，他们应该看到一个图像，如果他们从 iPad（宽度：1024px）查看它，则图像应该被隐藏（显示：无）。

Answer 1

您可能指的是宽度为 的 iPad Pro 1024px。

您可以通过检查设备高度来使用媒体查询来检测设备是 iPad 还是笔记本电脑：1366px我认为 iPad Pro 的高度高于任何笔记本电脑的高度，因此 CSS 将如下所示：

@media screen and (min-width: 1024px) and (min-height: 1320px) {
    /* iPad Pro */
}

@media screen and (min-width: 1024px) and (max-height: 1310px) {
    /* Laptop */
}