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