-webkit-device-pixel-ratio
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
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
BCD tables only load in the browser