https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio
The -webkit-device-pixel-ratio is a non-standard Boolean CSS feature which is an alternative to the standard resolution media feature.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
The resolution CSS media feature can be used to test the pixel density of the output device.
SyntaxSection
The resolution feature is specified as a <resolution> value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed min-resolution and max-resolution variants to query minimum and maximum values, respectively.
/* Exact resolution */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* Minimum resolution */
@media (min-resolution: 72dpi) {
p {
text-decoration: underline;
}
}
/* Maximum resolution */
@media (max-resolution: 300dpi) {
p {
background: yellow;
}
}https://www.sitepoint.com/community/t/high-resolution-phones-and-tablets/37828
I'm building my first responsive site and things are going well. However, I have an issue which I haven't seen addressed anywhere. What do you do for phones that have very high resolutions. For example I have a droid DNA and which has a resolution of 1920 x 1080-resolution. So, the website is responsive and showing on the phone, but the media queries aren't beneficial since they don't get triggered.
What do you do?
------------------
You'd have to find an @media rule that targets something in its range. The key seems to be the pixel ratio, which is quite high on a device like that. You coud try
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-width:1920px) { }
or
@media only screen and (-webkit-min-device-pixel-ratio: 3) and (max-device-width:1920px) { }
Mind you, I'm not keen on chasing down devices like this. Phones like the Droid should follow the practice of Apple, where the device responds to small screen @media rules even though it is high resolution. If we keep running after more and more devices with our coding, there won't be pressure on device manufacturers to switch their brains on.
Media query for high resolution mobile 1080px (Xperia Z etc)
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?
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
---------------------
0
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.
https://css-tricks.com/snippets/css/retina-display-media-query/
For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ }
Or other highish-res:
/* 1.25 dpr */ @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){ /* Retina-specific stuff here */ } /* 1.3 dpr */ @media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){ /* Retina-specific stuff here */ } /* 1.5 dpr */ @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ /* Retina-specific stuff here */ }
@media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 700px) { /* Medium screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 700px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 700px), only screen and ( min-resolution: 192dpi) and (min-width: 700px), only screen and ( min-resolution: 2dppx) and (min-width: 700px) { /* Medium screen, retina, stuff to override above media query */ } @media only screen and (min-width: 1300px) { /* Large screen, non-retina */ } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 1300px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 1300px), only screen and ( min-resolution: 192dpi) and (min-width: 1300px), only screen and ( min-resolution: 2dppx) and (min-width: 1300px) { /* Large screen, retina, stuff to override above media query */ }