O que é razão de pixels do dispositivo?
A razão de pixels do dispositivo é o número de pixels físicos da tela por pixel CSS em cada eixo, portanto uma razão de 2 mapeia um pixel CSS para um bloco de 2 por 2 pixels do dispositivo. Ela influencia a quantidade de detalhes de imagem que uma tela pode exibir em um determinado tamanho de layout.
Como funciona a razão de pixels do dispositivo
Um navegador organiza as páginas em pixels CSS e mapeia esse sistema de coordenadas para os pixels do dispositivo de exibição usando um fator de escala. Esse fator reflete o ambiente de visualização e pode mudar com a configuração da tela ou o zoom da página, portanto não é uma especificação permanente do hardware. A seleção de imagens candidatas e o dimensionamento do buffer de pixels do canvas podem usá-lo para preservar detalhes no tamanho CSS renderizado. Ele faz parte das decisões de apresentação do lado do cliente, e não dos metadados de resolução intrínseca do arquivo.
Informações essenciais
- O navegador expõe a razão atual por meio de window.devicePixelRatio, mas mover uma janela entre telas ou alterar o zoom da página pode modificar o valor durante uma sessão.
- O descritor de densidade de srcset permite que o navegador compare imagens candidatas com a densidade efetiva da tela, considerando também suas próprias regras de seleção e as condições da rede.
- Um canvas cujas dimensões do bitmap correspondam apenas às dimensões CSS pode parecer pouco nítido em uma tela de alta densidade; aumentar o buffer de pixels também eleva o uso de memória e o trabalho de desenho.
Quando a razão de pixels do dispositivo é importante
Use a razão de pixels do dispositivo ao selecionar dimensões de imagens responsivas para uma renderização mais nítida. Fornecer resolução excessiva aumenta os custos de transferência e memória sem melhorar os detalhes além da capacidade da tela.