-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

<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 est dppx.

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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Support complet 1Edge Support complet 12Firefox Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée 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.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée 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.
IE Aucun support NonOpera Support complet OuiSafari Support complet 3WebView Android Support complet ≤37Chrome Android Support complet 18Firefox Android Support complet 63
Notes
Support complet 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Support complet 49
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée 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.
Support complet 45
Notes Désactivée
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Désactivée 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.
Opera Android Support complet OuiSafari iOS Support complet 1Samsung 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é.

Voir aussi