5

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?

Daniel Kellaway
  • 189
  • 1
  • 5
  • 14

3 Answers3

6

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

Raptor
  • 53,206
  • 45
  • 230
  • 366
Timidfriendly
  • 3,224
  • 4
  • 27
  • 36
  • I'm curious as to why this has been marked down? An explanation would be help us all to understand how this answer can be improved. – Timidfriendly May 11 '13 at 18:55
  • 2
    @Timidfriendly I didn't down-vote this, however I believe it might be for a few reasons: 1. The vendor-specific `-webkit-` prefix, which only targets WebKit browsers. Opera (not sure if its transition to WebKit also means the `-o-` prefix is obsolete), Mozilla and Internet Explorer would not be targeted by this, but they also have mobile implementations. 2. A more appropriate approach might have been to use `min-resolution: 3dppx` (the standard way) instead of `-webkit-min-device-pixel-ratio: 3`. I don't see what else could've caused it, as it's a pretty solid answer. – omninonsense Sep 28 '13 at 04:39
  • @Timidfriendly For those phones without an dpr, what would we use? I have an LG G2. – jamespick Dec 18 '13 at 00:15
  • All phones have a devicePixelRatio, even your standard desktop computer browser where it is '1'. The question is, is it more than '1', then what is it. You can find this out by using window.devicePixelRatio to return it's value. Whatever that value is, that is what is what should be used in the media query. I don't know what that value is, but if it was '3' then a cross browser solution would be: - @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-resolution: 423dpi) { ... } – Timidfriendly Dec 19 '13 at 21:42
  • 1
    The link was deleted. I think this one has the same info https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_topuk3xmrOeNhYEsST_LAJikGKKzOQ2o – TryHarder Dec 05 '14 at 05:02
  • I was only able to test this with an emulator, but I found that the above media query successfully targeted the iphone6+, Google Nexus 5, Samsung Galaxy Note 3, Samsung Galaxy S4, Sony Xperia Z and Z1. – TryHarder Dec 05 '14 at 08:39
1

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.

sourcejedi
  • 3,051
  • 2
  • 24
  • 42
  • @DanielKellaway Click on the words in my answer :). I plugged my own blog post, but it should link through to the canonical explanation at quirksmode as well. – sourcejedi May 11 '13 at 18:26
  • Oops, it doesn't. The quirksmode articles are [here](http://www.quirksmode.org/mobile/viewports.html) and [here](http://www.quirksmode.org/mobile/viewports2.html) – sourcejedi May 11 '13 at 18:29
-4

`@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*/
}`
dsfg
  • 130
  • 9