Media Query for High Resolution Mobile 1080Px (Xperia Z etc)

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

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

CSS Media query not working correctly

Depends on your Sony Xperia, really.

This is a related question. Considering it as an Xperia Z or Z1, you can use:

@media screen and (-webkit-device-pixel-ratio:3) {styles}

Think of newer iPhones, they have a CSS Pixel Ratio of 2, so their width is actually 640px, but using initial-scale=1.0 we target it by using 320px. A Xperia Z or Z1 would have 1080/3, which means it is target by a @media screen for 360px.

EDIT: You can use comma-separated lists of media queries, so even with your media query for 640 px in place, you can include the other:

@media screen and (min-width:640px), screen and (-webkit-device-pixel-ratio: 3) {styles}

This allows you to keep the the initial-scale and even supports Nexus tablets with 1920 px resolution and pixel-ratio 3

Why does a css media query not match my phone

This is caused by the device pixel ratio, which down scales the actual device ratio.

Here is a list of phones and the actual display resolution used by media queries. It doesn't include the One plus two (which has a ratio of 1:3)

The following allows me to target the one plus two accurately.

@media screen and (max-width: 360px) and (orientation: portrait) and (min-resolution: 3dppx) {
  .mainImage {
    background-image: url('shop-home-vertical-1080.jpg');
  }
}

As I understand it. In most circumstance I shouldn't do this. But in this case it allows me to download a higher resolution image for screens that can take advantage of it.

Just discovered that dppx is not well supported yet. This won't work on safari.

What parameters does the css media type handheld care about?

The handheld media type is largely useless, because current generation smartphones and like devices (at least Android and iOS stock browsers) do not use it to avoid being given super-minimal formatting designed for older devices.

I recommend using media queries. Note that you can query the resolution as well as the size, and you can query the size in physical units (in, pt, cm) as well as pixels. (I don't know whether devices report reasonably accurate physical unit sizes, however.)

However, whenever practical, you should not design for particular devices but so that your site works well at any scale (the current buzzword for this is responsive design, and much has been written on techniques for this). My personal approach is to write my style sheet almost entirely in terms of em (line height units), and then use media queries to switch out the layout in cases where a particular layout only works well on a certain size range; and since the size is defined in terms of em, the media query should be written in terms of em as well. The advantage of this is that the font size is a reasonable proxy for what is a reasonable display size for items on screen — reflecting the viewing distance and (if the user has taken the time to configure their browser) the user's eye/hand abilities.

---

Related Topics