web-dev-qa-db-fra.com

Densité de pixels, affichage de la rétine et taille de police en CSS

Je n'ai pas moi-même de MacBook Retina pour tester ces choses, et il semble y avoir beaucoup de confusion sur Internet à propos de la conception Web sur des écrans à haute densité de pixels.

Maintenant, je suppose que WebKit sur un MacBook avec écran Retina redimensionne la page environ deux fois sa taille car la plupart des pages Web ne sont pas conçues pour s'adapter à la densité de pixels plus élevée?

À mon avis, le cas idéal lors de la conception de ceux-ci, ou en fait, tout type d'affichage est d'utiliser des ems au lieu de pixels comme vous pourriez le faire;

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    body { font-size: 150%; }
}

@media
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) {
    body { font-size: 200%; }
}

et la page entière serait mise à l'échelle en conséquence. Ou serait-ce? La taille de police par défaut des navigateurs fonctionnant sur les MacBook Retina est-elle toujours de 16 pixels ou est-elle supérieure? Parce que s'il est plus élevé, l'effet d'échelle se multiplierait.

Je suppose que ma question est; si j'utilise régulièrement des ems, la seule chose que je devrais faire est de changer la taille de la police pour chaque ratio pixel/appareil?

csspixelretina-display
19
Triplr

OK, c'est un malentendu assez sérieux (ce qui est cool! :)), alors voici une brève explication de ce que vous voudrez peut-être faire.

Tout d'abord, tout iPhone/iPod/iPad récent ou de nombreux téléphones Android ont des écrans Hi DPI, donc vous pourriez déjà avoir quelque chose à tester. Sinon, et vous le faites professionnellement, achetez simplement un IPod Touch 4G.

En termes de fonctionnement, pour 99% des trucs, vous n'avez rien à faire. Si cela fonctionnait comme vous l'avez suggéré, la plupart des sites Web auraient un quart de la taille qu'ils devraient être et Internet serait brisé.

Pour les polices, SVG, les ombres de boîte CSS, les dégradés et tout autre élément dessiné CSS, tout est bon. Ces choses ont l'air géniales sans aucun travail supplémentaire. (D'où la raison pour laquelle nous avons poussé vers tout en CSS pendant un certain temps.)

Pour les bitmaps (c'est-à-dire pngs, jpgs, gifs), tout ce que vous devez faire est de fournir à l'image une résolution 2x, mais de la dimensionner de la même manière que la normale.

Par exemple, si votre page avait une image de 100 pixels par 100 pixels, vous fourniriez une image de 200 pixels par 200 pixels, mais spécifiez en CSS ou en tant qu'attribut en HTML qu'elle est de 100 pixels par 100 pixels.

La raison pour laquelle cela fonctionne est qu'un pixel à l'écran n'est pas le même qu'un pixel CSS. C'est une bonne chose, car sinon, comme je l'ai dit, les choses seraient minuscules.

Je suppose qu'avec le recul, il aurait peut-être été préférable d'appeler l'unité px en CSS quelque chose de différent, comme un dot ou quelque chose, mais voilà.

Vous verrez parfois des références à des pixels indépendants du périphérique, ce qui fait la différence entre le CSS px et le vrai pixel à l'écran.

45
Rich Bradshaw

L'écran Retina ne double pas la taille de l'élément. Il n'effectue que des images sur le Web.

Pour chaque "pixel Web" d'une image, il faut 4 (je pense) "pixels d'écran", de sorte que les images sont étirées pour remplir ces espaces de pixels supplémentaires, ce qui les rend moins nettes sur un écran rétine. Les images doivent être exportées à un DPI plus élevé et servies aux écrans Retina via des requêtes multimédias ou Javascript.

Le texte, les effets CSS, le canevas, les vecteurs SVG, etc. ne sont pas directement affectés par l'affichage de la rétine.

3
ChazUK