Question

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

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

Answer 1

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

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

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

Answer 2

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

如果你想在1024px宽度的ipad中隐藏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

希望它有所帮助：）

Answer 3

这里是最好的例子，在css中进行不同的媒体查询？

＆＃13;

@media only screen and (min-width: 480px) {
  /* for mobile*/
  
}

@media only screen and (min-width: 768px) {
    /* for  ipad or tablets*/

  
}

@media only screen and (min-width: 1140px) {
  
    /* for laptop..*/

}

＆＃13;

Answer 4

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

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

4 个答案: