问题
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?
回答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
回答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.
回答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*/
}`
来源：https://stackoverflow.com/questions/16499299/media-query-for-high-resolution-mobile-1080px-xperia-z-etc