Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
-webkit-device-pixel-ratio
est une caractéristique média non-standard, alternative à la caractéristique média standard resolution
.
Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px
). Bien que la valeur soit de type <number>
, sans unité donc, l'unité implicite est dppx
.
Attention ! Cette caractéristique est spécifique à WebKit. Tant que possible, on utilisera resolution
.
Syntaxe
-webkit-device-pixel-ratio
est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio
et -webkit-max-device-pixel-ratio
pour fixer un seuil minimum/maximum.
Valeurs
<number>
- Le nombre de pixels physiques pour chaque pixel (
px
) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite estdppx
.
Implémentation
/* Unité dppx implicite */ @media (-webkit-min-device-pixel-ratio: 2) { ... } /* équivalent à */ @media (min-resolution: 2dppx) { ... } /* De même */ @media (-webkit-max-device-pixel-ratio: 2) { ... } /* équivalent à */ @media (max-resolution: 2dppx) { ... }
Exemples
CSS
/* Résolution exacte */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* Résolution minimale */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* Résolution maximale */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } }
HTML
<p>Voici un test pour la densité de pixel de votre appareil.</p>
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
Compatibility Standard La définition de '-webkit-device-pixel-ratio' dans cette spécification. |
Standard évolutif | Définition initiale dans un standard. |
Safari CSS Reference 'media query extensions' in that document. |
Documentation non-officielle, non-standard. | Documentation initiale. |
Compatibilité des navigateurs
Ordinateur | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
-webkit-device-pixel-ratio media feature | Chrome Support complet 1 | Edge Support complet 12 | Firefox
Support complet
63
| IE Aucun support Non | Opera Support complet Oui | Safari Support complet 3 | WebView Android Support complet ≤37 | Chrome Android Support complet 18 | Firefox Android
Support complet
63
| Opera Android Support complet Oui | Safari iOS Support complet 1 | Samsung Internet Android Support complet 1.0 |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.