CSS media queries issue with iOS devices

I have the following media queries set up to target the various iOS devices (iPad3, iPad2, iPhone4, iPhone3). When I load this page with an iPhone3 and an iPad2, the correct divs are colored in. When I load this page with an iPad3 however, the iPad2 AND the iPhone4 styles are loaded, but NOT the iPad3. (Can’t test the iPhone4 at the moment.) Any ideas?

ipad3 should be RED
ipad2 should be GREEN
iphone4 should be BLUE
iphone3 should be ORANGE

..and the 4 css files are coded accordingly (this example is the iPad3.css file):

#ipad3 { background-color: red; }

Problem courtesy of: Rob Lauer


Because you have the width of the viewport set to device-width, the iPad3 screen resolution will still get reported as 1024×768, but the device-pixel-ratio will be 2.

Solution courtesy of: Jon Friskics


Robbo, your code is using: -webkit-min-device-pixel-ratio:0
which is an invalid statement. The non-retina devices will have a pixel ration of 1. That’s probably why the iPad 3 picks up both stylesheets.

Discussion courtesy of: Martin

To target the iPad 3 you can use:

The pixel dimensions are the same, but the pixel-ratio changes compared to the original iPad and the iPad 2.

Discussion courtesy of: Erik Tjernlund

This recipe can be found in it’s original form on Stack Over Flow

责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » CSS media queries issue with iOS devices

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录