Results 1 to 2 of 2
-
23rd Sep 2017, 05:53 PM #1
Retina Display Media Query
For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":
Code:@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 */ }
Old Stuff (don't use, keeping for posterity)
Code:@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ }
Code:@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina-specific stuff here */ }
The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed.
Here's the spec on resolution units.
Example:
Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image all the way down.
Code:@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 */ }
EasyMoney Reviewed by EasyMoney on . 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: Rating: 5
-
18th Oct 2018, 11:51 AM #2Website's:
onelogicsoft.com blog.onelogicsoft.comWhat are you using (code) to display retina?
read more here http://blog.onelogicsoft.com
Sponsored Links
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Similar Threads
-
10 Best ways for getting unlimited traffic to your website from social media
By Kevin in forum Social Networking SitesReplies: 1Last Post: 16th Dec 2015, 09:03 AM
Vn5socks.net 22-08-2024 | socks 5...
Live | 212.83.143.151:25968 | Belgium | Brussels...