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

【问题标题】：How to set different media-queries for laptop 1024px and ipad 1024px width?如何为笔记本电脑 1024px 和 ipad 1024px 宽度设置不同的媒体查询？
【发布时间】：2017-02-16 23:04:33
【问题描述】：

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

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

【问题讨论】：

标签： html css ipad responsive-design media-queries

【解决方案1】：

如果屏幕的宽度大小相同，我猜 CSS 无法区分它们。

您可以使用 JavaScript。来自navigator 对象的platform 属性返回一个字符串，其中包含使用浏览器的平台。（即 MacIntel、Win32）（用法：platform.navigator）

对于禁用和启用样式表，这可能对您有用：http://www.codechewing.com/library/how-to-disable-or-enable-a-stylesheet-in-javascript/

【讨论】：

【解决方案2】：

对于 ipad 特定的媒体查询，请使用以下代码，

如果你想在 ipad 中以 1024px 宽度隐藏 img，即横向模式，你可以使用类“hide-me-landscape”

如果你想在 ipad 中以横向和纵向模式隐藏 img，请使用“hide-me”类

如果你想在纵向模式下隐藏 img，请使用“hide-me-portrait”类

见下面的代码

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me{
        display: none;
    }
}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-portrait{
        display: none;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .hide-me-landscape{
        display: none;
    }
}

你可以了解更多here

您也可以使用modernizr 来检测用户是否在使用触摸屏设备并相应地应用您的css

希望对你有帮助:)

【讨论】：

【解决方案3】：

你可能是指宽度为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 */
}

【讨论】：