Tela com DPI alto

Paul Lewis

Introdução

As telas HiDPI são ótimas, elas deixam tudo mais suave e limpo. Mas eles também apresentam um novo conjunto de desafios para os desenvolvedores. Neste artigo, vamos analisar os desafios únicos de exibir imagens na tela no contexto de telas HiDPI.

A propriedade devicePixelRatio

Vamos começar do início. Antes das telas HiDPI, um pixel era um pixel (se ignorarmos o zoom e a escalação por um tempo) e pronto. Não era necessário mudar nada. Se você definir algo como 100 px de largura, é só isso que vai existir. Em seguida, os primeiros aparelhos móveis HiDPI começaram a aparecer com a propriedade devicePixelRatio um pouco enigmática no objeto de janela e disponível para uso em consultas de mídia. Essa propriedade nos permitiu entender a proporção de como os valores de pixel (que chamamos de valor de pixel lógico) no CSS se traduziriam no número real de pixels que o dispositivo usaria na renderização. No caso de um iPhone 4S, que tem um devicePixelRatio de 2, um valor lógico de 100 px equivale a um valor de dispositivo de 200 px.

Isso é interessante, mas o que isso significa para nós, desenvolvedores? No início, percebemos que nossas imagens estavam sendo aprimoradas por esses dispositivos. Estávamos criando imagens na largura de pixel lógica dos nossos elementos e, quando eram renderizados, eles eram redimensionados pelo devicePixelRatio e ficavam desfocados.

Figura 1: uma imagem sendo ampliada e desfocada devido ao devicePixelRatio

A solução de fato para isso tem sido criar imagens aumentadas pelo devicePixelRatio e, em seguida, usar o CSS para reduzi-las pelo mesmo valor. O mesmo vale para a tela.

function setupCanvas(canvas) {
  // Get the device pixel ratio, falling back to 1.
  var dpr = window.devicePixelRatio || 1;
  // Get the size of the canvas in CSS pixels.
  var rect = canvas.getBoundingClientRect();
  // Give the canvas pixel dimensions of their CSS
  // size * the device pixel ratio.
  canvas.width = rect.width * dpr;
  canvas.height = rect.height * dpr;
  var ctx = canvas.getContext('2d');
  // Scale all drawing operations by the dpr, so you
  // don't have to worry about the difference.
  ctx.scale(dpr, dpr);
  return ctx;
}

// Now this line will be the same size on the page
// but will look sharper on high-DPI devices!
var ctx = setupCanvas(document.querySelector('.my-canvas'));
ctx.lineWidth = 5;
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 200);
ctx.stroke();