targeting iphone4 with responsive design (css media queries) as if lower res

Question

This must have been answered before, but I can't find a related question.

I've designed a responsive site, with css media queries going all the way down to correctly display on 320 wide.

Want I want is the iPhone4 (640 x 960) when in portrait mode (640 wide) to adhere to media queries as if it's display-width = 320 pixels instead. Rationale: even though the iphone has more pixels, I do want to display a simplified layout to those user, similar to users of non high-density phones.

Any way to do this, by specifying some meta-tag for these high-pixel density phones for example?

Of course, I could define separate media-queries for iphone 4 and the like with min-device-pixel-ratio: 2 but this leads to separate css media queries (one for low and one for high pixel density) which essentially have the same logic, which doesn't seem very DRY to me( http://en.wikipedia.org/wiki/Don%27t_repeat_yourself )

Strange thing is: the new Ipad 3 , with pixel density 2, DOES correctly render the way I want, i.e: it mimics (at least as css media queries are concerned) a device with half the resolution.

Solution 1

The iPhone 4 (and 4S) will respond to this meta tag:

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

It's the "initial-scale" part that you're after. It will make the high res device act like it's 320px wide (or 480 in landscape).

There are other bugs around landscape orientation that you should be aware of.

Also, keep in mind that there is an orientation parameter available to media queries:

@media screen and (orientation:landscape) {
/* Landscape styles */
}

Solution 2

First: I think there's a typo in your question -- on a 640x960 display, 640 wide is portait mode, not landscape. Portrait is vertical, landscape is horizontal.

That said, if I'm reading your question right, you're asking how to target a retina display iphone using media queries for width.

The answer is that you can't -- both the retina display iphone and the non-retina display report themselves to the browser as 320x240. The difference, as you noted, is that the retina display has 2x pixel density, which you can target with media queries:

.avatar {
    display: block;
    width: 50px;
    height: 50px;
    background: url("50x50-avatar.png");
}
@media only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
  .avatar {
    background: url("100x100-avatar.png");
    background-size: 50px 50px;
  }
}

This example is for displaying high-resolution images on retina displays, but you can use the same techniques for tweaking layout for retina displays.

So, in a nutshell, write your styles for the non-retina displays first, and then add retina display overrides using media queries, which should avoid your DRY concerns.

Further reading:

• Retina iPad Specific CSS
• Safari Developer Library: Configuring the Viewport

Comments

[Geert-Jan]

Thanks, indeed exactly what I was looking for. Little error you might want to change: you state '640 in landscape', this should be '480 in landscape' imo

[Geert-Jan]

Thanks, but not exactly what I meant. See the accepted answer. You're right on the landscape / portrait mixup, I'm fixing that.

[Ricardo Zea]

I use <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">. This is what The Boston Globe uses.

[kel]

I would change the semicolon to a comma so it doesn't throw an error in Chrome.