最小宽度媒体查询在ipad上不起作用？

为什么在横向模式下iPad上没有接收到以下媒体查询

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

或

我想这个css的目标是任何浏览器是1000像素或以上的宽度，而不仅仅是iPad。因此，如果可能，我宁愿使用第二个选项“最小宽度”而不是“最小设备宽度”。这两个版本都可以在我的电脑上使用firefox。 谢谢

---

看起来可能需要

屏幕
属性。
iPad总是报告其宽度为768px，高度为1024px，因此您必须了解它是如何以
方向旋转的，并使用
最小设备高度：1000px
如下：

/*这将适用于宽度为999px及更小的所有屏幕*/
* {
颜色：绿色；
背景色：黑色；
}
/*
这将适用于所有大于1000像素宽的屏幕
包括横向ipad，但不包括纵向ipad。
*/
@介质（方向：横向）和（最小设备高度：1000px），
所有和（最小宽度：1000px）{
* {
颜色：白色；
背景色：红色；
}
}

结果:


iPad

纵向-绿色文本-黑色背景
横向-白色文本-红色背景

iPhone

纵向-绿色文本-黑色背景
横向-绿色文本-黑色背景

计算机（分辨率）

1680x1050-白色文本-红色背景
800x600-绿色文本-黑色背景


使用chrome和firefox（还有人使用IE了吗？）

参考文献：






如果发现这对新iPad非常有效

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

作为记录，我不知道为什么

@media (min-width: 1000px) {

 /* css here */

}  

没有为你工作。这个问题第一次发布后，iPad可能发生了一些变化

下面是一个工作示例：

实时查看：

编辑视图：

还要确保包括

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



在您的页面标题中。
我试图使用一个简单的媒体查询，如下所示：
@仅介质屏幕和（最小宽度：768px）
{css here}
但我不会在我测试的iPad pro 10.5上触发，我将它增加到900px（用于纵向），它工作得很好，我认为由于需要补偿的视网膜显示，它可能在旧的iPad非视网膜上工作得很好。
试图为平板电脑编写媒体查询，事实上，我遇到了iPad尺寸报告不足的问题。当我尝试使用
@媒体屏幕和（最小宽度：768px）
时，我的风格被应用于其他平板电脑设备，但被iPad忽略了。我开始在开发者工具中玩弄响应设备模型，我偶然发现了解决方案。出于某种原因，当我将屏幕尺寸缩小到760px时，我的风格就会适用。因此，我编辑了媒体查询以读取
@媒体屏幕和（最小宽度：760px）一切都开始按预期工作。
您的代码在iPad上也能工作，但我想针对其他平板电脑和100像素宽的桌面浏览器。听起来添加一些javascript设备检测可能是一个更健壮的解决方案。我喜欢Modernizer，它结合了我编写的自定义代码，将浏览器和版本附加为html类，这样我就可以确切地知道我在使用什么。我只是不太相信浏览器能做他们应该做的事情，所以我喜欢在几分钟内找到特定于浏览器的问题并直接攻击它们，而不是试图找到一个耗时数小时或数天的完美解决方案。忘了提一下，我认为使用javascript可以将浏览器的宽度和高度附加为自定义类，您可以可以添加.min1000Width之类的内容。然后你就可以使用普通的CSS，而不需要媒体查询，即使是功能最差的浏览器也能理解。iPad的工作方式有点烦人，但谢谢你的回答。@jdln Np。我同意应该有更好的方法来实现这一点。希望将来会有一些更好的移动设备和平板电脑CSS标准。
@media (min-width: 1000px) {

 /* css here */

}  

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