Question

为什么在横向模式下iPad上没有拾取以下媒体查询？

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

或者

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

我希望这个css能够针对1000px或更宽的浏览器，而不仅仅是ipads。因此，如果可能的话，id更适合使用min-width的第二个选项而不是min-device-width。这两个版本都可以在我的电脑上使用firefox。谢谢

Answer 1

iPad始终报告其宽度为768像素，高度为1024像素，因此您必须使用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＆amp; firefox（有人甚至再使用IE了吗？）

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

Answer 2

来自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 3

如果发现这适用于新iPad

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

Answer 4

为了记录，我不确定为什么

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

我试图使用这样的简单媒体查询： @media only screen and（min-width：768px） {css here} 但我不会触发iPad专业版10.5＆＃39;我正在测试，我把它增加到900px（对于肖像）它工作得很好，我认为因为视网膜显示你需要补偿，它可以在旧的iPad非视网膜上正常工作。

Answer 6

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

min-width媒体查询无法在ipad上运行？

6 个答案: