@media for retina displays

Switching off @media for 2x pixel density

[caffinated]

I have a simple web site layout for large-screens: a full width header, then two panels which sit side by side in the middle with a full-width footer at the bottom.

I'm using @media css to make everything full-width, falling one underneath the other on screen-sizes of 1024px wide or less.

It works really well with one exception - a friend has an iPad which is 1024px wide but it's a retina display with a 2x pixel density (thus acts like a 2048px width) - but my site is switching to small-screen mode because of the @media command being based on screen width.

I've trawled the internet to look for answers but it seems only Opera supports max pixel density. If a apply min pixel density, it affects normal screens.

Anyone else had this problem - any ideas?

[DrDoc]

I really don't see the need for a separate rule based on screen size. You could simply make the width fixed (or a percentage, also setting

min-width

to 512px) and float the panels left.

If the width (or effective width) is 1024px or less, they will behave like you describe. Otherwise, they will line up side by side.

Without a brief sample of the difference between the two, it's difficult to say ...

[caffinated]

Ok, I over simplified the description of the layout (it was the option to not change for 2x pixel density that I was seeking). In fact, when the screen size is larger than 1024, the layout - as described - sits in a centered box that's 1000px wide. When the screen size becomes small, the each of the elements (header, 2 center panels and footer) become full-screen-width.

[Fotiman]

You can target retina displays by using device-pixel-ratio like this:
[developer.mozilla.org...]

[caffinated]

Thanks Fotiman, but I know that - those articles (and there's no shortage) are aimed mostly at those that want to include high res images etc. I don't want to target retina, I just want the retina screens to see the normal large display, not the mobile version - it's more like I want to preclude retina than target it.

I wish it were something like:
@media screen and -webkit-device-pixel-ratio <2
but this doesn't seem to be possible...or am I wrong?

[Fotiman]

The only option that's less than 2 is 1.
O_O

So logically:
@media (-webkit-min-device-pixel-ratio: 1)

[lucy24]

Oops! Overlapped fotiman

I wish it were something like:
@media screen and -webkit-device-pixel-ratio <2

How about min and max? -webkit-min-device-pixel-ratio and similar. According to That Other Forum, the -moz- equivalent uses a wonky format involving min-- and max-- with double hyphens. But as long as we're asking about webkit (iOS) we're OK.

[caffinated]

If I use this:

@media screen and (max-width: 1000px)
{
---adjustments---
}

...it switches to the adjustments as desired (except it also switches on retina screens)

If I change it to:

@media screen 
and (max-width: 1000px),
and (-webkit-min-device-pixel-ratio : 1.5),
and (min-device-pixel-ratio : 1.5),
and (-webkit-min-device-pixel-ratio : 1),
and (min-device-pixel-ratio : 1)
{
---adjustments---
}

...for some reason, on my regular PC which has a 1440px wide monitor, it jumps to mobile layout. I don't understand why, the first line still clearly states max-width: 1000px, so it seems those "and"s are acting like "or"s (the device pixel ratio of my browser on my monitor is 1).

[caffinated]

quick update:
I just removed these lines:

and (-webkit-min-device-pixel-ratio : 1),
and (min-device-pixel-ratio : 1)

...and it's still giving me the mobile version. So my screen is 1440 which is over 1000 and my device pixel ratio is 1 which is less than 1.5. So why is it triggering the contents of this @media statement?

[Fotiman]

Comma-separated lists behave like the logical operator or when used in media queries

[developer.mozilla.org...]

I think you want to remove those commas.

[caffinated]

Fotiman, thank you thank you thank you. Was tearing my hair out here. All good now.

[caffinated]

...but still...even with an or, the event should not have triggered because neither the max-width nor the 1.5px density were true. Still pondering.

[Fotiman]

The "screen" was true.

[caffinated]

Yes, but the @media doesn't seem to operate on screen, it seems to operate on one of these: documentElement.offset or documentElement.client, window.innerWidth/Height. I know this because I am using

http://www.quirksmode.org/m/tests/widthtest.html

and it shows me that when I re-size my window, other @media tests are triggered correctly against the new window size (not screen size which always remains the same in the quirksmore test).

[caffinated]

There is a sledgehammer solution, I could use @media in the <head> section to load a different style-sheet for 2x density, which doesn't contain the other @media elements but this isn't at all elegant.

[swa66]

It works really well with one exception - a friend has an iPad which is 1024px wide but it's a retina display with a 2x pixel density (thus acts like a 2048px width) - but my site is switching to small-screen mode because of the @media command being based on screen width.

The trick with retina displays is that browsers use it differently than you think it should be used.
A retina screen is used by a browser to increase the quality of the thing being displayed, not to make the screen "bigger"

So if you have an iPad that has a width of 2048 PHYSICAL pixels, a browser will use ALL measurements you give it to make the entire screen have 1024 LOGICAL pixels.
What it does however is draw things like fonts much crisper. It can also if you let it scale images draw much shaper images as well.

But on a retina screen an logical pixel is not a physical pixel and you deal with logical pixels only from CSS (or javascript).

[caffinated]

Thanks swa66. I've been reading up and discovered this authority article : devicePixelRatio [quirksmode.org]

I'm still trying to get to grips with the content but I suspect JavaScript is the best option because of the variety of platform translations of the standards (as always - feels like IE5 and IE6 all over again). If I find anything better, I'll update here.

[edited by: DrDoc at 9:37 pm (utc) on Aug 20, 2013]
[edit reason] Linked link [/edit]

[lucy24]

and (-webkit-min-device-pixel-ratio : 1.5),
<snip>
and (-webkit-min-device-pixel-ratio : 1),

With or without commas, with or without "and", you would never do this. At best the second line overrides the first; at worst they're mutually exclusive and nothing executes. The essence of min-anything (or max-anything) is that it's a minimum (or maximum). You only need one of it.

1 < 1.5

[caffinated]

Yes you're quite right lucy - I should have left the "min" out of the statement.
Here's what I have learned so far...
If I use this:

@media only screen and (max-width: 1000px)

It works on Chrome (v28), Firefox (v23), Safari (v5.1.2) and Opera (v12.10) on my PC. It doesn't work on IE8 but may well work on later versions (I prefer to test on 8 as it is still prevalent).

I have checked it on an iPhone but forgot to ask which version but it was working. It doesn't work on Retina screens.

In order to get it to work on Retina screens I tried this:

@media only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9)

This still worked on Chrome and Safari (which both use webkit) but this now precluded Mozilla and Opera. To get these two working again, I added the resolution option:

@media only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9), only screen and (max-width: 1000px) and (max-resolution: 1.9dppx)

So now we have a potential solution. However, as I don't own an iPad, I am relying on my colleague (who is temp indisposed) to inform me of the success of the webkit instruction - I used an on-line emulator and it failed but I'm not going to rely on that. Fingers crossed, the code looks ok to me.

If anyone can spot an obvious error (lucy24 *grin*) please let me know.

[drhowarddrfine]

It doesn't work on IE8 but may well work on later versions (I prefer to test on 8 as it is still prevalent).

Media queries have never worked on IE8.

There is no device with a pixel ratio of 1.9. There's 1, 1.5 and 2. You can find a 1.3 and there are a few 3's out there.

I had trouble following this thread but there seems to be some really goofy hacking going on but I can't get a handle on it cause I've been too tired by the time I come here.

[caffinated]

There is no device with a pixel ratio of 1.9. There's 1, 1.5 and 2. You can find a 1.3 and there are a few 3's out there.

Using Lucy24's principle, and as this is a max value, it should preclude anything less than 1.9, thus it should trigger on all lower values including 1, 1.5, 1.3 etc. Or...do I need to actually generate options for every possible pixel-ratio on the market? Maybe I do?

[caffinated]

I had trouble following this thread but there seems to be some really goofy hacking going on but I can't get a handle on it cause I've been too tired by the time I come here.

I don't think having a tired whinge without having constructive comments is particularly useful.

[drhowarddrfine]

What I was trying to say is I'm sensing there is far too much effort being put into this than is necessary.

The only thing we do with ratios is for images, and not all of them. There are also techniques for using 2x images highly compressed and served to everyone and just not bothering with ratios.

Sorry for the quick hit and runs but I gotta go.

[caffinated]

@drhowarddrfine: In a sense you are totally correct. In an ideal world, responsive sites are built small to large, ie. design for mobile then scale up for larger screens (the process you were loosely referring to). Unfortunately, I have a customer who is a bit stuck in the dark ages and pointed at a centered-box layout and said "that's what I want". So I'm having to work backwards (and perhaps not the only one out there with a similar dilemma?). I have a solution now that works. I have a full-screen layout and I have a small screen layout. The CSS is based around the large-screen. The following CSS @media selectors then switch to small-screen for phones and tablets but leaves devices with Retina-type screens out of the switch (because they are perfectly capable of displaying the large-screen layout):

@media 
only screen and (max-width: 1000px) and (-webkit-max-device-pixel-ratio: 1.9),
only screen and (max-width: 1000px) and (max-resolution: 1.9dppx),
only screen and (max-width: 1000px) and (max-resolution: 137dpi)
{
--- mobile adjustments ---
}

This makes the adjustments on all devices I am aware of where the pixel density is less than 2 (webkit) or less than 2 dots per pixel (Opera and Mozilla - W3 Standards compliant) or 2 x 96dpi (IE).

The only last hurdle now is to ensure that high-def mobiles still see the mobile layout - the above CSS still leaves the large-screen layout for iPhone4, 4S and 5 (and a few others too). This will just require a small bit of JavaScript to detect phones but leave the current CSS and @media selectors to deal with the tablets).

I have tested the above on iPhone 4S, iPad with Retina and most top browsers on PC (shrinking the window to various view-port sizes) and it also works in IE10.

[drhowarddrfine]

You think YOU have it bad. :) I just picked up a client who's lead programmer built the core site around letting jQueryMobile style everything cause he didn't want to mess with styling. I told them I want to get rid of all that but they won't let me do it.

jQueryMobile has its finger in everything and this guy made the whole site as one page! So you can't make a standalone test page, upload it, and expect it to work the same way.

"That's why they call it MOBILE!", I told the site owner, to no avail.

After three weeks, I'm starting to get a handle on how to make things fit but, before now, every day, I had to talk myself out of quitting and giving them their money back.

[lucy24]

:: bump ::

... rather than start a new thread.

I've now got doubts about the usefulness of pixel-ratio. I started with an entertaining bit of code that I-forget-who originally posted somewhere hereabouts: the one that changes your background color dynamically as you resize your browser window. Pure HTML, no scripting required.

Obvious next step was to adapt the code for pixel-ratio detection. My rough-and-dirty version goes like this:

@media handheld
{ body {background-color: #666;}} /* dark grey */
@media screen
{ body {background-color: #CCC;} } /* lt grey */
@media screen and (min-device-pixel-ratio: .9), screen and (-webkit-min-device-pixel-ratio: .9), screen and (min--moz-device-pixel-ratio: .9), screen and (-o-min-device-pixel-ratio: 9/10)
{ body {background-color: #696;} /* green */ }
@media screen and (min-device-pixel-ratio: 1), screen and (-webkit-min-device-pixel-ratio: 1), screen and (min--moz-device-pixel-ratio: 1), screen and (-o-min-device-pixel-ratio: 1/1)
{ body {background-color: #99F;} /* blue */ }
@media screen and (min-device-pixel-ratio: 1.5), screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (-o-min-device-pixel-ratio: 3/2)
{ body {background-color: #F66;} /* red */ }
@media screen and (min-device-pixel-ratio: 2), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1)
{ body {background-color: #F9C;} /* lavender */ }
@media screen and (min-device-pixel-ratio: 3), screen and (-webkit-min-device-pixel-ratio: 3), screen and (min--moz-device-pixel-ratio: 3), screen and (-o-min-device-pixel-ratio: 3/1)
{ body {background-color: #FFC;} /* yellow */ }

I won't repeat the screen-width version. It's a lot shorter, because there's no need to mess about with vendor prefixes; the size cutoffs (screen, max-width) are 1500px, 980px (my iPad), 960px, 700px, 480px.

Turns out that
#1 iPad and iPhone both claim to be 980px wide. Yes, even in portrait mode.
#2 iPhone considers itself a screen. (I'd had the idea it called itself a handheld, but apparently that's restricted to ebook readers.) OK, so that's where pixel-ratio comes in.
#3 iPad claims to have a pixel ratio of 1 --the same as a desktop browser-- in both orientations, even though the whole point of rotation is that you're viewing the same content (horizontal space) at different physical sizes.
#4 iPhone will admit to a pixel ratio of 2 (two) in portrait mode. I know screens have gotten bigger, but I don't believe it's half the width of an iPad screen.

This means that the pages I'd thought were properly responsive for cell-phone viewing are anything but. And you can't use pixel-ratio in CSS as an alternative to UA detection for user-interface issues beyond simple display, because the iPad doesn't come out any different. That's assuming for the sake of discussion that there exist human* browsers with resolutions of less than 1000px so you can't shunt everyone <=980 to the mobile side.


* Human as distinct from, say, the plainclothes Bingbot, which in its MSIE7 manifestation claims to be 800x600. Different thread.

[swa66]

Lucy,

retina

the ipad (or a retina mac (I'm typing this on one) have for all purposes that matter in html and css the same screen as their non-retina counterpart.
So if they do have double the amount of pixels: the html and css don't know: it'll just light up more pixels as needed.

All you need to do is deliver high resolution images as they look bad on a retina screen.

My physical pixels on this screen is 2880x1800 is anything would display truly at that resolution it's be unreadable small on the 15" panel. So I can change as a user how much the screen "zooms". The default apple uses is that the screen acts as if it were 1440x900 (the same non-retina 15" macs actually have as physical pixels). The extra pixels are used to add sharpness to fonts (or images that are rescaled in the browser. I mostly change it to have a logical size of 1920x1200 - I like that one.

All you need is to detect that you deal with a screen that needs images that scale.

This is from something I use in production:
it works great on everything I tested it on:

(at the end of the CSS)

@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) { 
  /* Retina-specific stuff here */
  header {
    background: white url('/images/[e-mail]') no-repeat;
    background-size: 200px 200px;
  }
}

the logo2x is 400px by 400px, the normal logo is 200px by 200px. as is the space in the header.

remember: retina means sharper not larger.

responsive
an iphone and ipad are quite capable of displaying normal non responsive websites, for that reason they
report a higher resolution.
If you want them to stop doing that and get your responsive design as you intend, you need to tell them in the html header:

 <meta name="viewport" content="width=device-width" />

The iphones will use 320px wide (retina or not)

[lucy24]

<meta name="viewport" content="width=device-width" />

Bingo! That works. Research assistance provided by son with iPhone.

(min-resolution: 192dpi)

What devices does this work with? webkit doesn't seem to read "resolution" at all, although mysteriously Chrome does. (So does Camino, meaning that the mozilla family has understood it for ages.) I looked it up to confirm direct observations.

I have one individual page that I use as the acid test for responsiveness, because it's parallel translations and is therefore coded as a three-cell-wide table. (This is much, much cleaner and simpler than slathering the whole thing with named divs.) On small viewports it's supposed to change to block display-- one after the other instead of side-by-side-- so it was an unpleasant surprise to find that my hypothetical iPhone visitor would be faced with table cells at, uhm, around three-quarters of an inch wide.

[caffinated]

@lucy24, You seem to be coming from exactly the same direction as me with your layout issue. I have found a particularly interesting article on responsive layout: [webdesign.tutsplus.com ], discussing the meta viewport HTML element. I've not had chance to fully test it's suggestions yet but it answers a lot of questions for me. However, I don't think the article is the be-all and end-all because it doesn't seem to take HD screens into consideration (I stand to be corrected on this).

With regard to HD screens, I notice in your retina-specific @media query you didn't include the standards-compliant

only screen and (min-resolution: 192dppx)

. In theory, this should talk to Mozilla and Opera - bearing in mind some folk may have Mozilla or Opera driven HD phones.

[caffinated]

correction to last post: min-resolution: 2dppx