Media query for high resolution mobile 1080px (Xperia Z etc)

Question

I am trying to get to grips with media queries for different devices. I have tried my new Sony Xperia Z mobile and displays in full scale site format due to the high resolution. How do I add a media query to re-size a grid and format like a standard mobiles scale? On the Xperia the font is also too small to read and needs to show bigger. Is this a problem for retina devices that act like full size monitor displays?

Xperia Z - resolution 1920 × 1080, PPI 443

How do I include media queries for such devices?

Answer 1

This code targets all devices with the same pixel ratio, which is actually what you need.

@media screen and (-webkit-device-pixel-ratio:3) {
    body {font-size: 250%}
}

Here is a list of devices and their device-pixel-ratio: https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o

Answer 2

Yes, it would be a problem for "retina devices that act like full size monitor displays." They would be violating CSS. But since -webkit-device-pixel-ratio works for you, it sounds like this is caused by something else.

You probably omitted this:

The viewport meta tag is used in modern "mobile" browsers. (iOS/Safari, Android/Chrome, Mobile Firefox, Opera). It lets developers say "this is a properly-designed website, not desktop-specific crud". Without it, the mobile browsers assume your website is designed with an unspecified min-width, somewhere around 960 pixels.

When I say "pixel", I mean "CSS pixel". We've established that your CSS pixels are 3 physical "device pixels" on a side. And this means the largest dimension on your device works out at 640 CSS pixels. This is much less 960, so "desktop" webpages - which are assumed in the absence of a viewport meta tag - will start off zoomed out.

Answer 3

`@media only screen and (max-device-width: 1920px) { /* define mobile specific styles come here */ }

@media only screen and (max-device-width: 640px) {
/* define mobile specific styles come here FOR I PHONE RETENA DISPLAY*/
}`