Media queries conflicting across devices

Question

I have 3 media queries on my site, the issue i'm having is the -webkit-min-device-pixel-ratio one for iphone is conflicting on android devices and the screen is not resolving correctly on android, if i take this mq out the site renders correctly but on an iphone 4 it doesn't and works off a 320px width.

Is there a way can get only an iphone 4/4s device to look at the -webkit-min-device-pixel-ratio: 1.5 media query ?

Below are my media queries:

    /*iphone4*/
            @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {


            /*Main*/
            div#container {
                width: 480px;
            }
    }

/*Other mobile phones*/
        @media screen and (max-width: 767px) {

          div#container {width: 480px;}
        }

/*Tablets*/   
        @media only screen and (max-width: 1023px) and (min-width: 768px) {
         div#container {width: 768px;}

        }

The whole strategy needs a review. Your first media query is also going to target the iPad 3. — Jezen Thomas
Why would you not just use width for the first rule rather than pixel ratio. I.e. if max-width < 480px than the container width = 320px? That seems more consistent with the rest of your approach. — Mike Brant
I could do that but involves creating another media query and not taking advantage of iphones retina screen — davey

Robot Woods Robot Woods · Accepted Answer · 2012-08-02T02:09:53

How wide do you think an iPhone 4 is (in pixels) and what do you think it's scale value is? reading your rules, I feel like you're trying to say "if it's a big phone, make this 480 wide. if it's a smaller phone that's retina, make it 480 wide, otherwise, 768"

but in reality, an iphone4 is 320 pixels wide, with a scale of 2, so you'd want to make your container 320px wide, and then do something with background-size:contain for images

However, ignoring that... this page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
@media (max-width: 767px) { body {background-color:#0000FF;} }
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
@media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

Appears:

blue in an iPod touch
blue in an Android Nexus S
blue in a Blackberry Bold
green in an iPhone4
red in an iPad

you can go to http://www.robotwoods.com/dev/misc/so_media2.html if you have other devices to test. And I posted a little entry about media queries here: http://blog.robotwoods.com/2012/08/media-queries/ but didn't really get into the pixel-ratio aspect

Media queries conflicting across devices

1 Answers