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

Question

为什么在横向模式下的 iPad 上无法拾取以下媒体查询？

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

或者

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

我希望这个 css 能够针对任何宽度为 1000px 或以上的浏览器，而不仅仅是 ipad。因此，如果可能的话，我宁愿使用第二个选项 min-width 而不是 min-device-width 。两个版本都可以在我的电脑上使用 Firefox 正常运行。 谢谢

Answer 1

来自 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 属性。

Answer 2

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

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

Answer 3

根据记录，我不确定为什么

@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">  

在页面的头部。

Answer 4

我试图使用像这样的简单媒体查询：
@media only 屏幕和（最小宽度：768px）
{此处为CSS}
但我不会在我正在测试的 iPad pro 10.5' 上触发，我将其增加到 900px（对于纵向）并且它工作得很好，我认为由于您需要补偿视网膜显示屏，它可能在旧设备上工作得很好iPad 非视网膜显示屏。

Answer 5

在尝试为平板电脑编写媒体查询时，我实际上遇到了 iPad 少报其尺寸的问题。当我尝试使用 @media screen 和 ( min-width: 768px ) 时，我的样式被应用到其他平板电脑设备，但被 iPad 忽略。我开始在开发人员工具中尝试响应式设备模型，并偶然发现了该解决方案。由于某种原因，当我将屏幕尺寸缩小到 760px 时，我的样式将会应用。因此，我编辑了媒体查询以读取 @media screen 和 ( min-width: 760px ) ，一切都开始按预期工作。

Answer 6

iPad 始终报告其宽度为 768px，高度为 1024px，因此您必须了解它如何随 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
  • 肖像       - 绿色文本 - 黑色背景
  • 横向 - 绿色文本 - 黑色背景
• 计算机（分辨率）
  • 1680x1050 - 白色文本- 红色背景
  • 800x600     -绿色文本-黑色背景

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

参考文献：
w3 媒体查询
Safari CSS参考
优化网页内容