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

Question

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

例如，如果有人在笔记本电脑上查看我的网站(宽度:1024 像素)，他们应该看到一张图片，如果他们从 iPad(宽度:1024 像素)查看我的网站，则图片应该被隐藏(显示:无)。

Answer 1

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

您可以使用媒体查询通过检查设备高度来检测设备是 iPad 还是笔记本电脑:iPad Pro 高度为 1366px，我认为这比任何笔记本电脑的高度都高，所以 CSS 看起来像这样:

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

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