/* ---------------------------------------------------------- */ | |
/* */ | |
/* A media query that captures: */ | |
/* */ | |
/* - Retina iOS devices */ | |
/* - Retina Macs running Safari */ | |
/* - High DPI Windows PCs running IE 8 and above */ | |
/* - Low DPI Windows PCs running IE, zoomed in */ | |
/* - Low DPI Windows PCs and Macs running Firefox, zoomed in */ | |
/* - Android hdpi devices and above */ | |
/* - Android tvdpi devices, including Google Nexus 7 */ | |
/* - Chrome running on high DPI Macs and PCs */ | |
/* - Opera running on high DPI Macs, PCs and mobile devices */ | |
/* */ | |
/* Please note that this code assumes you'll swap a */ | |
/* 2× version of your images. If you'd like to supply */ | |
/* finer increments, other thresholds might be appropriate. */ | |
/* */ | |
/* @marcedwards from @bjango */ | |
/* */ | |
/* ---------------------------------------------------------- */ | |
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), | |
only screen and (-o-min-device-pixel-ratio: 13/10), | |
only screen and (min-resolution: 120dpi) | |
{ | |
/* Your code to swap higher DPI images */ | |
} |
This comment has been minimized.
This comment has been minimized.
The extra curly brace and dangling comma cause this to fail, so here's my fork |
This comment has been minimized.
This comment has been minimized.
Oh yep, you're both right. Fixed. |
This comment has been minimized.
This comment has been minimized.
your media query is brilliant. I've started using it for all my projects and it works perfectly. FYI - it also works with Low DPI Windows & OS X PCs with Firefox zoomed in (tested today with FF 17 on Windows 8 and OS X 10.8.2) |
This comment has been minimized.
This comment has been minimized.
@coliff Thanks! I've updated the comment to include your info. |
This comment has been minimized.
This comment has been minimized.
Smart idea! Will try this out on my next project. |
This comment has been minimized.
This comment has been minimized.
Awesome media query! What about the new(er) dppx unit? Worth adding yet? @media (min-resolution: 1.3dppx) {} |
This comment has been minimized.
This comment has been minimized.
I have try this for the firefox on mac retina;
|
This comment has been minimized.
This comment has been minimized.
Thanks for sharing this, It works really good! However with Chrome v.35 I get this Debug message in the console:
It is not an error nor a warning. Is this something expected? Maybe is something to consider. Hope it helps |
This comment has been minimized.
This comment has been minimized.
Hi, How to target Galaxy Tab 4 7inch, it uses the same resolution for Samsung Galaxy Tab 4 10 inch 1280*800. I have the media query for 10 inch but, in my 7 inch i tools the CSS of 10inch. How to differentiate the media query in this case. Thanks in advance. |
This comment has been minimized.
This comment has been minimized.
Media queries for iPhone 6 plus only: https://gist.github.com/paulmillr/24694465f292d25128cc |
This comment has been minimized.
This comment has been minimized.
@stinoga It seems like dppx still doesn’t have full support: http://caniuse.com/#feat=css-media-resolution @chimos Please see above. :) dppx should be the way to go, but it doesn’t have support everywhere yet. Hopefully soon. |
This comment has been minimized.
This comment has been minimized.
@prasannavigneshr If they’re the same resolution, you’d have to find out the min-device-pixel-ratio or min-resolution(dppx) for each device. Hopefully they’re different, otherwise you couldn’t target specific CSS (there may be other options, but they may get more tricky). @paulmillr Nice! |
This comment has been minimized.
This comment has been minimized.
Merci ça fonctionne très bien pour moi avec quelques ajouts pour les portables et les tablettes et min-résolution: 240dpi ce qui exclu les mDPI, je n'ai pas inclu les téléphones. @media only screen and (-webkit-min-device-pixel-ratio: 1.3),only screen and (-o-min-device-pixel-ratio: 13/10),only screen and (min-resolution: 240dpi){
} |
This comment has been minimized.
This comment has been minimized.
Amazing... Anyone have a media query to target all Android devices? |
This comment has been minimized.
This comment has been minimized.
Awesome! |
This comment has been minimized.
This comment has been minimized.
This was published in 2012. Is it still actual in 2020, or are there better methods? |
This comment has been minimized.
This comment has been minimized.
As far as I’m aware, it’s still a great way to go.
|
This comment has been minimized.
Extra curly brace at the end?