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

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总是将其宽度报告为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的
  • 画象 - 绿色文本 - 黑背景
  • 风景 - 白色文本 - 红色背景
• 苹果手机
  • 画象 - 绿色文本 - 黑背景
  • 风景 - 绿色文本 - 黑背景
• 电脑(分辨率)
  • 1680x1050 - 白色文本 - 红色背景
  • 800x600 - 绿色文本 - 黑色背景

使用chrome和firefox(还有人甚至使用IE吗？)

参考:
w3媒体查询
Safari CSS参考
优化Web内容