最小宽度媒体查询不工作在iPad上？

为什么在横向模式下在iPad上拾取以下媒体查询？最小宽度媒体查询不工作在iPad上？

@media all and (min-device-width: 1000px) { 
    css here 
}

或者

@media all and (min-width: 1000px) { 
    css here 
}

我想这个CSS针对任何浏览器是1000像素宽或以上，不只是台iPad。出于这个原因，id相当适用于最小宽度的第二个选项，如果可能的话不使用min-device-width。这两个版本在我的电脑上都可以正常使用firefox。感谢

来源

2011-10-11 Evans

在iPad上始终报告其为768px宽，其作为1,024像素的高度，所以你必须找出它是如何与orientation旋转和使用min-device-height:1000px像这样：

 /* This will apply to all screens with a width 999px and smaller */ 
* { 
    color:green; 
    background-color:black; 
} 

    /* 
     This will apply to all screens larger then 1000px wide 
     including landscape ipad but not portrait ipad. 
     */ 
@media (orientation:landscape) and (min-device-height:1000px), 
     all and (min-width:1000px) { 
    * { 
     color:white; 
     background-color:red; 
    } 
}

结果：

iPad的
- 肖像 - 绿色文本 - 黑色背景
- 景观 - 白色文本 - 红色背景
iPhone
- 肖像 - 绿色文本 - 黑背景
- 景观 - 绿色文本 - 黑色背景
电脑（分辨率）
- 1680×1050 - 白色文本 - 红色背景
- 800x600的 - 绿色文本 - 黑色背景

使用Chrome &火狐（没有人甚至使用IE浏览器了吗？）

参考文献：
w3 media queries
Safari CSS Reference
Optimizing Web Content

来源

2011-10-13 17:58:40 chown

您的代码和链接对我无效。 – Evans

有点烦人的iPad以这种方式工作，但感谢您的答案。 – Evans

@jdln Np。我同意应该有更好的方法来完成这一点。希望未来会有更好的移动设备和平板电脑的CSS标准。 – chown

从http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

/* iPad [portrait + landscape] */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    .selector-01 { margin: 10px; } 
    .selector-02 { margin: 10px; } 
    .selector-03 { margin: 10px; } 
}

它看起来像screen属性可能是必需的。

来源

2011-10-13 17:47:35

你的代码可以在ipad上工作，但我想定位其他平板电脑以及超过100px宽的桌面浏览器。 – Evans

这听起来像添加一些JavaScript设备检测可能是一个更强大的解决方案。我喜欢modernizr与我写的附加浏览器和版本作为html类的自定义代码的组合，因此我确切知道我正在处理的是什么。我只是不相信浏览器足以做他们应该做的事情，所以我喜欢在几分钟内直接发现浏览器的具体问题并直接攻击它们，而不是试图找到需要几小时或几天的完美解决方案。 –

忘了提及我认为与JavaScript，你可以追加浏览器的宽度和高度作为自定义类，你可以添加类似.min1000Width。然后，你就可以在没有媒体查询的情况下拥有香草CSS，即使是功能最少的浏览器也能理解。 –

如果发现了这个新的iPad

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) { 
    * { 
     color:white; 
     background-color:red; 
    } 
}

来源

2012-10-12 18:15:40 Jeshurun

为了记录在案的伟大工程，我不知道为什么

@media (min-width: 1000px) { 

/* css here */ 

}

不适合你。自这个问题首次发布以来，iPad可能会发生什么变化？

这里有一个工作示例：
实时取景：http://fiddle.jshell.net/panchroma/Bn4ah/show/
编辑观点：http://fiddle.jshell.net/panchroma/Bn4ah/

此外，一定要包括

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在页面的头部。

来源

2013-10-10 01:16:33

我试图用一个简单的媒体查询是这样的： @media只有屏幕和（最小宽度：768px）{ 这里的CSS} ，但我不会在iPad Pro的10.5' 我是测试触发我将它增加到900px（用于肖像），它工作得很好，我认为由于需要补偿的视网膜显示器，它可能在旧的iPad非视网膜上正常工作。

来源

2017-06-27 13:44:51

最小宽度媒体查询不工作在iPad上？

回答

相关问题