-
-
Save zhaiduo/30384c429d3809ee2d5f335e52856d5b to your computer and use it in GitHub Desktop.
A CSS media query that captures almost all high DPI aware devices.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ---------------------------------------------------------- */ | |
/* */ | |
/* 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 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. */ | |
/* */ | |
/* A test for CSS pixel densites can be found here: */ | |
/* http://bjango.com/articles/min-device-pixel-ratio/ */ | |
/* */ | |
/* @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 */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Devices with -webkit-min-device-pixel-ratio: 1.0
-- || All non-Retina Macs
| || Apple iPhone (1st generation)
| Apple iPhone 3G
| Apple iPhone 3GS
| Apple iPad (1st generation)
| Apple iPad 2
| Apple iPad mini (1st generation)
| Acer Iconia A500
| Samsung Galaxy Tab 10.1
| Samsung Galaxy S
|
Devices with -webkit-min-device-pixel-ratio: 1.3
|| Asus MemoPad HD 7
| || Google Nexus 7 (2012 model)
|
Devices with -webkit-min-device-pixel-ratio: 1.4
|| Nokia Lumia 520
| ||
Devices with -webkit-min-device-pixel-ratio: 1.5
|| Google Nexus S
| || HTC Desire
| HTC Desire HD
| HTC Incredible S
| HTC Velocity
| HTC Sensation
| Kindle Fire HD
| Samsung Galaxy S II
| Sony Xperia Tablet Z
| Sony Xperia U
|
Devices with -webkit-min-device-pixel-ratio: 2.0
|| All Macs with Retina displays
| || Apple iPhone 4
| Apple iPhone 4S
| Apple iPhone 5
| Apple iPhone 5c
| Apple iPhone 5s
| Apple iPhone 6
| Apple iPhone 6s
| Apple iPhone 7
| Apple iPad (3rd generation)
| Apple iPad 4
| Apple iPad Air
| Apple iPad mini (2rd generation)
| HTC One X
| Google Galaxy Nexus
| Google Nexus 4
| Google Nexus 7 (2013 model)
| Google Nexus 10
| Motorola Moto X
| Samsung Galaxy S III
| Samsung Galaxy Note II
| Sony Xperia S
| Sony Xperia T
|
Devices with -webkit-min-device-pixel-ratio: 2.6
|| Nokia Lumia 930
| || Google Nexus 5X
|
Devices with -webkit-min-device-pixel-ratio: 3.0
|| HTC One (M7)
| HTC Butterfly
| Huawei Honor 6
| Huawei Mate 9
| Apple iPhone 6 Plus
| Apple iPhone 6s Plus
| Apple iPhone 7 Plus
| LG G2
| Nexus 5
| Nexus 6
| Motorola Moto G4
| OnePlus One
| Oppo Find 7 (X9076)
| Samsung Galaxy S4
| Samsung Galaxy Note 3
| Samsung Galaxy Note 4
| Sony Xperia Z
| Xiaomi Mi 3
|