Code CSS
Source : Retina Display Media Query
Pour l’inclusion de visuels en haute résolution, mais seulement pour les écrans qui peuvent les exploiter :
(le pixel-ratio pour un écran Retina étant 2x)
1 2 3 4 5 6 |
/* 2 dpr */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } |
Pour les autres hautes résolutions :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* 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 */ } |
Liste des périphériques par résolution (avec test du périphérique de surf) :
Source : Device pixel density tests
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 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
Devices with -webkit-min-device-pixel-ratio: 3.0
HTC One (M7)
HTC Butterfly
Huawei Honor 6
Apple iPhone 6 Plus
LG G2
Nexus 5
OnePlus One
Oppo Find 7 (X9076)
Samsung Galaxy S4
Samsung Galaxy Note 3
Samsung Galaxy Note 4
Sony Xperia Z
Xiaomi Mi 3