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 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome Support complet Oui | Edge ? | Firefox
Support complet
49
| IE Aucun support Non | Opera Support complet Oui | Safari ? | WebView Android ? | Chrome Android ? | Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- 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é.