So, I’m building my first responsive site and things are going well. However, I have an issue which I haven’t seen addressed anywhere. What do you do for phones that have very high resolutions. For example I have a droid DNA and which has a resolution of 1920 x 1080-resolution. So, the website is responsive and showing on the phone, but the media queries aren’t beneficial since they don’t get triggered.
What do you do?
You’d have to find an @media rule that targets something in its range. The key seems to be the pixel ratio, which is quite high on a device like that. You coud try
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width:1920px) { }
or
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) { }
Mind you, I’m not keen on chasing down devices like this. Phones like the Droid should follow the practice of Apple, where the device responds to small screen @media rules even though it is high resolution. If we keep running after more and more devices with our coding, there won’t be pressure on device manufacturers to switch their brains on.
Thanks. Yes I don’t want to target a bunch of different devices. I was wondering if there was a way to recognize if someone is on a phone and then select a media query to use. I just tried looking at this site on the iphone 5, but the same issue exists. Maybe I have another issue going on because I’m still getting a 3 column layout on the iphone 5s and from what I understand the iphone 5s has a width of 640 pixels. I have the media query set to 641-max width, so did I do something wrong or what could be my issue?
Screen pixels, yes, but you still target the device with @media only screen and (max-width: [COLOR="#FF0000"]320[/COLOR]px)
You do have typos in your meta line, though:
<meta name=”viewport” content=”width=device-width[COLOR="#FF0000"]”[/COLOR], initial-scale=1.0”>
Remove that extra ", and make sure you are using straight quotes instead of curly.
As Ralph said don’t confuse css pixels width screen pixels.
From my understanding if the pixel ratio is 3 then 1920 would equate to 640px in your media query.
More reading:
http://menacingcloud.com/?c=highPixelDensityDisplays
http://www.sencha.com/blog/resolution-independent-mobile-ui/
http://mobiforge.com/design-development/effective-design-multiple-screen-sizes
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density#Sony
However,initially you should forget about devices and resolution and think about content breakpoints instead.Just design your site from large to small and add a media query at the point that the content needs it to change (e.g. 3 columns may need to go into 2 columns at smaller widths and vice versa). It’s the content that should dictate the media query breakpoint and not the device. In that way you catch all devices anyway.
Afterwards you can tidy up the high resolution image issues with device-pixel-ratio media queries where needed.