当前位置: 动力学知识库 > 问答 > 编程问答 >

css media query not working for Iphone (Chrome and Safari) / Apple MBP Safari

问题描述:

I am starting a new site and was gathering some feedback for my to-develop CSS media query, to see which resolutions were reported by some devices

I asked some friends to test the css media query, and it turned out no Iphone user returned a result for the resolution part.

What it comes down to is when I use this code

@media only screen and (min-resolution: 5dpi) {

h1 {color: orange;}

.desc1:after {content:" The resolution is for you";}

}

This works on all devices (desktops, android, chrome, firefox) except Iphones and Safari on the Mac (works on Chrome on the Mac)

In the head I have this line also:

<meta name="viewport" content="width=device-width, initial-scale=1">

Any guess why this does not work on some devices?

网友答案:

You need to use "-webkit-min-device-pixel-ratio" for Safari. See http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/

分享给朋友:
您可能感兴趣的文章:
随机阅读: