cela est mentionné dans chaque article sur le Web mobile, mais je ne trouve nulle part d'explication sur ce que cet attribut mesure exactement.
Quelqu'un peut-il s'il vous plaît expliquer ce que les requêtes comme cette vérification?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {

    //high resolution images go here

}

css ilyo
la source

161

Réponse courte

Le rapport de pixels du périphérique est le rapport entre les pixels physiques et les pixels logiques. Par exemple, l'iPhone 4 et l'iPhone 4S rapportent un rapport de pixels de l'appareil de 2, car la résolution linéaire physique est le double de la résolution linéaire logique.

Résolution physique: 960 x 640
Résolution logique: 480 x 320

La formule est:

$linres_p / linres_l$

Où:

$linres_p$ est la résolution physique linéaire

et:

$linres_l$ est la résolution linéaire logique

D'autres appareils signalent des ratios de pixels différents, y compris des non entiers. Par exemple, le Nokia Lumia 1020 rapporte 1.6667, le Samsumg Galaxy S4 rapporte 3 et l'Apple iPhone 6 Plus rapporte 2.46 (source: dpilove ) . Mais cela ne change rien en principe, car vous ne devriez jamais concevoir pour un appareil spécifique.

Discussion

Le "pixel" CSS n'est même pas défini comme "un élément d'image sur un écran", mais plutôt comme une mesure angulaire non linéaire de $0,0213 °$ l'angle de vision, qui est d'environ $1/96$ un pouce à bout de bras. Source: longueurs absolues CSS

Cela a de nombreuses implications en matière de conception Web, telles que la préparation de ressources d'image haute définition et l'application minutieuse de différentes images à différents ratios de pixels de l'appareil. Vous ne voudriez pas forcer un appareil bas de gamme à télécharger une image à très haute résolution, uniquement pour la réduire localement. Vous ne voulez pas non plus que les appareils haut de gamme mettent à l'échelle les images basse résolution pour une expérience utilisateur floue.

Si vous êtes coincé avec des images bitmap, pour prendre en charge de nombreux ratios de pixels de périphériques différents, vous devez utiliser CSS Media Queries pour fournir différents ensembles de ressources pour différents groupes de périphériques. Combinez cela avec de belles astuces comme background-size: coverou définissez explicitement les background-sizevaleurs de pourcentage.

Exemple

#element { background-image: url('lores.png'); }

@media only screen and (min-device-pixel-ratio: 2) {
    #element { background-image: url('hires.png'); }
}

@media only screen and (min-device-pixel-ratio: 3) {
    #element { background-image: url('superhires.png'); }
}

De cette façon, chaque type de périphérique ne charge que la ressource image correcte. Gardez également à l'esprit que l' pxunité en CSS fonctionne toujours sur des pixels logiques .

Un cas pour les graphiques vectoriels

Au fur et à mesure que de plus en plus de types de périphériques apparaissent, il devient de plus en plus difficile de leur fournir à tous des ressources bitmap adéquates. En CSS, les requêtes multimédias sont actuellement le seul moyen, et en HTML5, l' élément image vous permet d'utiliser différentes sources pour différentes requêtes multimédias, mais le support n'est toujours pas à 100% car la plupart des développeurs Web doivent encore prendre en charge IE11 pendant un certain temps ( source: caniuse ) .

Si vous avez besoin d'images nettes pour des icônes, des dessins au trait, des éléments de conception qui ne sont pas des photos , vous devez commencer à penser au SVG, qui s'adapte parfaitement à toutes les résolutions.

Anders Tornblad
la source

1

merci, donc si je crée un fichier css pour iphone 4 et que je donne à la page des mesures CSS de 480 x 320 et que width=device-widthje l'aurai étiré en plein écran?

ilyo

1

Exactement. Et si vous utilisez des images haute résolution pour background-image, vous pouvez les combiner avec -webkit-background-size:50%, car sinon, la taille de l'image suivra le nombre de pixels logique . w3.org/TR/2002/WD-css3-background-20020802/#background-size

Anders Tornblad

2

Vous ne pouvez pas. Vous devrez disposer vos éléments en utilisant des pixels logiques, et utiliser des images de résolution plus élevée et l' background-sizeastuce pour utiliser l'affichage de manière optimale.

Anders Tornblad

2

Je n'ai aucune idée de l'affaire Android. Il se peut que différents fabricants aient des idées différentes sur les pixels logiques et physiques ... Essayez-le vous-même sur quelques centaines d'appareils différents ... Ou supposez simplement que les valeurs indiquées par l'appareil sont correctes. Ne concevez pas pour des appareils spécifiques, mais concevez des plages de valeurs à l'aide de requêtes multimédias!

Anders Tornblad

2

@atornblad Je pense que ça devrait être ".. entre les pixels physiques et logiques "

Ilya Buziuk

159

Ratio de pixels de l'appareil == Ratio de pixels CSS

Dans le monde du développement Web, le ratio de pixels de l'appareil (également appelé Ratio de pixels CSS) est ce qui détermine la façon dont la résolution d'écran d'un appareil est interprétée par le CSS.

Le CSS d'un navigateur calcule la résolution logique (ou interprétée) d'un appareil par la formule:

$\text{logical resolution}=\frac{\text{physical resolution}}{\text{device pixel ratio}}$

Par exemple:

Apple iPhone 6s

Résolution réelle: 750 x 1334
Ratio de pixels CSS: 2
Résolution logique:

$\frac{750}{2} \text{ x } \frac{1334}{2} = 375 \text{ x } 667$

Lors de la visualisation d'une page Web, le CSS pensera que l'appareil a un écran de résolution 375x667 et Media Queries répondra comme si l'écran était 375x667 . Mais les éléments rendus sur l'écran seront deux fois plus nets qu'un véritable écran 375x667 car il y a deux fois plus de pixels physiques dans l'écran physique.

Quelques autres exemples:

Samsung Galaxy S4

Résolution réelle: 1080 x 1920
Ratio de pixels CSS: 3
Résolution logique:

$\frac{1080}{3} \text{ x } \frac{1920}{3} = 360 \text{ x } 640$

iphone 5s

Résolution réelle: 640 x 1136
Ratio de pixels CSS: 2
Résolution logique:

$\frac{640}{2} \text{ x } \frac{1136}{2} = 320 \text{ x } 568$

Pourquoi le rapport de pixels de l'appareil existe-t-il?

La raison pour laquelle le rapport de pixels CSS a été créé est que, à mesure que les écrans des téléphones obtiennent des résolutions plus élevées, si chaque appareil avait toujours un rapport de pixels CSS de 1, les pages Web seraient rendues trop petites pour être vues.

Un moniteur de bureau plein écran typique a une résolution d'environ 24 "à 1 920 x 1 080. Imaginez si ce moniteur était réduit à environ 5" mais avait la même résolution. Voir des choses à l'écran serait impossible car elles seraient si petites. Mais les fabricants proposent régulièrement des écrans de téléphone de résolution 1920 x 1080.

Ainsi, le rapport de pixels de l'appareil a été inventé par les fabricants de téléphones afin qu'ils puissent continuer à pousser la résolution, la netteté et la qualité des écrans de téléphone, sans rendre les éléments de l'écran trop petits pour être vus ou lus.

Voici un outil qui vous indique également la densité de pixels de votre appareil actuel:

http://bjango.com/articles/min-device-pixel-ratio/

Jake Wilson
la source

L'article de Wikipédia a été supprimé. :-( Cette information est-elle disponible ailleurs?

Simon East

1

Ainsi, les images sont étirées pour correspondre à des dpi élevés ou à des pixels physiques. Disons que l'image est de 300 pixels, que le px logique / css est également de 300 mais que le px physique est de 600, alors le réglage de la largeur de l'image signifierait que l'image était étirée .. J'ai également entendu dire que parfois les images sont plus petites avec un dpi élevé, pourquoi?

Muhammad Umer

2

@MuhammadUmer Dans votre exemple, une image de 300 pixels width: 100%sera sur toute la largeur de l'écran. Il ne sera pas étiré. L'écran «pense» que c'est un affichage de 300 pixels. Les images sont affichées selon la résolution logique / css. Maintenant, dans votre exemple, vous pouvez également servir une image de 600 pixels. Ce sera la pleine largeur de l'affichage logique de 300 pixels, mais comme votre affichage est natif de 600 pixels, l'image sera deux fois plus nette que votre image 300 pixels d'origine. Image plus grande, mais elle est meilleure car l'écran a tous ces pixels supplémentaires. C'est l'idée derrière "Retina Displays".

Jake Wilson

@JakeWilson: C'est un nouveau sujet pour moi et je ne le comprends pas complètement. Dans l'exemple, rapport de pixels CSS = 2. L'image a une largeur de 300 pixels physiques, en css nous la réglons à 100%, elle deviendra donc 300 pixels CSS de large. Étant donné que le rapport CSS px est de 2, il deviendra 600 pixels physiques de large et sa largeur correspondra exactement à la largeur de l'affichage. Mais comment se fait-il qu'il ne soit pas étiré si sa largeur d'origine est de 300 px physiques et maintenant c'est 600 px physiques? Ma compréhension est que sa qualité est inférieure car elle a été physiquement étirée de 300 à 600 px. Pouvez-vous nous en dire un peu plus, s'il vous plaît?

Peter

1

@Anuj Je ne sais pas et peu importe comment c'est défini dans le matériel / logiciel. L'un est calculé à partir de l'autre dans les deux sens.

Jake Wilson

9

https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio

-moz-device-pixel-ratio
Donne le nombre de pixels de périphérique par pixel CSS.

c'est presque auto-explicatif. le nombre décrit le rapport de la quantité de pixels "réels" (pixels physiques de l'écran) utilisés pour afficher un pixel "virtuel" (taille définie en CSS).

oezi
la source

4

comment savoir si un appareil utilise une mesure de pixels virtuels et de quoi il s'agit? et comment utiliser les pixels de l'appareil dans les mesures css et non dans le virtuel?

ilyo

malheureusement, vous devez le rechercher sur Google ou le tester sur un appareil réel :(

netalex

9

L'article de Boris Smus High DPI Images for Variable Pixel Densities a une définition plus précise du ratio de pixels de l'appareil: le nombre de pixels de l'appareil par pixel CSS est une bonne approximation, mais pas toute l'histoire.

Notez que vous pouvez obtenir le DPR utilisé par un appareil avec window.devicePixelRatio.

Sam Dutton
la source

quel est exactement le ratio de pixels de l'appareil?

Réponses:

Réponse courte

Discussion

Exemple

Un cas pour les graphiques vectoriels

Ratio de pixels de l'appareil == Ratio de pixels CSS

Pourquoi le rapport de pixels de l'appareil existe-t-il?