Media request for a high resolution 1080px mobile phone (Xperia Z, etc.)

Question

I am trying to deal with media queries for different devices. I tried my new Sony Xperia Z mobile and displayed it in a full-blown site format due to the high resolution. How to add a media query to change the grid size and format, like a standard mobile scale? On Xperia, the font is also too small to read and should show more. Is this a problem for retina devices that act as full-size monitor displays?

Xperia Z - Resolution 1920 × 1080, PPI 443

How to enable media queries for such devices?

Answer 1

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

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

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

Answer 2

Yes, that would be a problem for "retina devices that act like full-screen monitors." They will break CSS . But since -webkit-device-pixel-ratio works for you, it looks like it is caused by something else.

You probably omitted this :

viewport meta tag is used in modern "mobile" browsers. (iOS / Safari, Android / Chrome, Mobile Firefox, Opera). This allows developers to say that "this is a properly designed website, not a desktop." Without this, mobile browsers assume that your site is designed with an undetermined minimum width, somewhere around 960 pixels.

When I say pixel, I mean CSS pixel. We have determined that your CSS pixels are 3 physical “device pixels” on the side. And that means your device’s largest size runs on 640 CSS pixels. This is much less than 960, so the "desktop" web pages, which are assumed in the absence of a browsing meta tag, will begin to decrease.

Answer 3

`@media screen only 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*/ }`