min-width media query not working on ipad?

后端 未结 6 709
被撕碎了的回忆
被撕碎了的回忆 2021-02-05 20:43

Why isnt the following media query being picked up on iPads in landscape mode?

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

Or

6条回答
  •  挽巷
    挽巷 (楼主)
    2021-02-05 21:36

    The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation and use min-device-height:1000px like so:

         /* 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;
        }
    }
    

    Results:

    • iPad
      • Portrait       - green text - black background
      • Landscape - white text  - red background
    • iPhone
      • Portrait       - green text - black background
      • Landscape - green text - black background
    • Computer (resolution)
      • 1680x1050 - white text  - red background
      • 800x600     - green text - black background

    Using chrome & firefox (does anyone even use IE anymore?)

    References:
    w3 media queries
    Safari CSS Reference
    Optimizing Web Content

提交回复
热议问题