iPad 3, páginas da web e tamanhos especificados em pixels

O iPad 3 é um grande passo à frente na resolução da tela de modelos anteriores, o que é bom.

No entanto, estou curioso para saber como isso interage com páginas da Web que especificam o tamanho dos elementos em pixels. Se essas instruções fossem seguidas literalmente, presumivelmente você precisaria de uma lupa para ler os resultados (ou mais praticamente, para usar a função de zoom em todas as páginas).

O navegador da Web do iPad leva isso em consideração e multiplica os tamanhos especificados por algum fator de conversão razoável para acabar com tamanhos de elementos que funcionam bem na tela de alta resolução?

De acordo com Quirksmode , um "pixel" é "essencialmente uma construção abstrata criada especificamente para nós, desenvolvedores da web". Em outras palavras, sim - o navegador da Web do iPad e outros navegadores (e outros aplicativos!) Na mesma situação lidam com isso sem problemas. Você pode ler mais sobre isso na postagem do QuirksBlog.

Considere que, em retrato, o iPad original tem apenas 768 pixels de largura. Isso é muito estreito para muitos / a maioria dos layouts de páginas da web. Em vez disso, ele renderiza a página como se tivesse 980 pixels de largura. Em seguida, reduz o tamanho para caber no pixel da tela real, diminuindo os gráficos. Ele também brinca com o texto para que fique claro, tornando-o diretamente (em vez de rasterizar e depois encolher, o que o tornaria impreciso).

Com uma tela Retina, ele ainda age como se tivesse 980 pixels, mas agora amplia tudo. O texto está agora muito nítido. Com elementos de imagem, se o gráfico realmente tiver mais resolução que o tamanho declarado, ele será mostrado com a melhor resolução possível. (Por exemplo, o elemento é IMG WIDTH = "980", mas esse gráfico em particular tem 1536 pixels de largura. É um gráfico de "largura total", para que você veja cada pixel um por um, mesmo que seja "apenas" "980 pixels de tamanho.)

Pode ser problemático, mas o Safari tenta redimensionar a página ... Pense em quando você clica duas vezes em um bloco de texto e é "ampliado" para texto maior. Ainda assim, as coisas podem renderizar de maneiras malucas. Ajuda muito a pensar no tamanho da janela de visualização em vez da resolução da tela ... E nos relacionamentos de janela de visualização / alinhamento / escala. Um valor particular no controle da experiência é definir a metatag da viewport nos cabeçalhos da página.

Boa pergunta - com a propriedade do iPad explodindo (19% das residências nos EUA há alguns meses e o total de compras chegando a centenas de milhões, a renderização de tablet não pode ser ignorada. Não é suficiente detectar o agente do navegador e encaminhar as pessoas para o site "móvel" otimizado para smartphones.