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
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | Oui | ? | Non | Oui | ? |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | ? | ? | ? | ? | ? |
1. Implemented as an alias for for -moz-device-pixel-ratio.
2. From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
3. From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.