it-swarm-pt.com

UI independente de DPI para páginas da web

Por quase uma década, antes de LCD se tornou a norma, as telas costumavam ter 72 ou 96 DPI (geralmente encontradas apenas nos displays Trinitron)), mas agora os displays de 120 e 144 DPI são bastante comuns.

Com a chegada do Windows 7, os problemas de DPI são mais ou menos resolvidos até certo ponto para aplicativos de desktop, e pelo menos a interface do usuário do sistema operacional nunca é interrompida em uma tela de alto DPI.

Agora chegamos às páginas da web - tive uma discussão enorme com um amigo sobre a criação de uma página da Web independente de DPI - minha opinião era de que os elementos da interface do usuário deveriam ter o mesmo tamanho em vários sistemas e que todas as dimensões de CSS deveriam ser especificadas em polegadas em vez de pixels .

Eu levantei este tópico em SO e houve uma desaprovação geral sobre o uso de polegadas como unidades, o que eu acho bastante razoável).

Eu tenho uma tela de 144 DPI de apenas 15,4 polegadas - O tamanho de pixels individuais é tão pequeno que o antialiasing de texto e a renderização de subpixel são realmente eficazes, mas vejo muitas páginas da Web que assumem que uma fonte de 8 pontos é grande o suficiente para ler em qualquer sistema.

Acredito que isso seja um aborrecimento enorme e uma falha fundamental no design da interface do usuário ... Fazendo suposições sobre o ambiente dos usuários quando você pode realmente se ajustar ao existente.

Não é muito diferente das primeiras páginas da Web nos anos 2000, que não eram exibidas corretamente em 1280x1024, pois foram projetadas para 1024x768

Outra ironia é que apenas o firefox processa um elemento de 1 polegada como 1 polegada física - todos os outros navegadores estão desativados, a menos que o DPI da sua tela seja 96 Obviamente, em algum lugar do código está o valor 96 codificado permanentemente - Quão difícil é substituí-lo por um GetScreenDPI ( ) ou qualquer outra chamada da API?

Quais são os seus pontos de vista?

6
rep_movsd

Pixels são um conceito no nível de hardware e, à medida que mais pixels estão sendo compactados em menos espaço, os designers terão que aprender a usar uma unidade de medida diferente. Se eu projetar um botão com 100 × 200 pixels, porque assumo uma tela de 100 dpi, um usuário em uma tela de 200 dpi sofrerá, pois o botão terá ¼ a área.

À medida que mais dispositivos são enviados com telas de alta densidade de pixels, os designers terão mais controle (e flexibilidade) se souberem os aspectos técnicos dos sistemas para os quais estão projetando.

Por exemplo, especificar layouts da Web em pontos é mais à prova de futuro, pois você especifica o tamanho físico (exceto os erros de implementação mencionados).

Como outro exemplo, as coordenadas da tela nos dispositivos iOS são medidas em pontos e, para dispositivos mais antigos sem a nova tela de alta densidade, havia um mapeamento individual de pontos em pixels. O iPhone 4 dobra o número de pixels, mas mantém as dimensões em tamanho de tela da mesma (assim, layouts antigos ainda funcionarão, mas novos layouts podem usar dimensões fracionárias para maior precisão posicional).

5
Brendan Berg

Eu acho que é melhor usar o percentual para o design da interface do usuário. Em seguida, você pode colocar valores absolutos na tag body. Altere os valores absolutos do corpo em qualquer lugar necessário usando javascript. então você terá tudo o resto OK.

Para a parte javascript, tente reconhecer a exibição do usuário e calcular valores. é fácil.

1
Morteza Milani

Por que usar polegadas quando os tamanhos de gráficos e de tela são medidos em pixels? Resoluções diferentes exibem diferentes números de pixels por polegada; portanto, se medimos em polegadas para margens, preenchimento, tamanhos de fonte (melhor usar px ou em que pt) etc., seria mais difícil descobrir o tamanho de nossas imagens (que são pixel por pixel) estaria na página. Sem mencionar que a resolução 800x600 é sempre 800px x 600px independentemente de quantas polegadas a tela possui.

Parte de se tornar um profissional de desenvolvimento/design da web (ou guru) é aprender como criar efetivamente seu site para que o maior número possível de usuários possa acessá-lo. E as técnicas necessárias para isso estão se tornando amplamente difundidas e aceitas. O que quero dizer é que, se o desenvolvedor está fazendo um trabalho lá, não deve ser um problema. E esse é um dos motivos pelos quais este site existe.

1
LoganGoesPlaces

consistência da unidade; polegadas reais. (72 pontos fazem uma polegada)

Fonte de 8 pontos Eu amo a liberação mono em 8 pt, mas isso é apenas porque parece uma grade tão boa em um tamanho tão pequeno - para mim, algumas fontes parecem estranhas quando você vê os detalhes, mas têm uma grade fina

1280x1024 (5: 4) e 1024x768 (4: 3); você poderia escalar bem, do menor para o maior, mas teria que girar a tela maior e, se essas telas tivessem o mesmo tamanho, um layout em polegadas funcionaria inalterado, mas ainda há dois problemas: um que exibe texto para uma tela de tamanho desconhecido e obter o tamanho da fonte correto

você pode tornar uma página invariável para a resolução da tela, mas não pode invariá-la para o tamanho e a forma da tela

modifiquei o mupdf (um visualizador de pdf) para o tamanho real padrão, pois em x11 o servidor fornece o tamanho real da tela e sua resolução relatada para a minha tela pelo xdpyinfo como:

dimensions:    1280x800 pixels (301x192 millimeters)
resolution:    108x106 dots per inch

(embora você deseje as dimensões da área de trabalho, você deve ler uma propriedade definida pelas Dicas do Extended Window Manager: _NET_WORKAREA(CARDINAL) = 0, 25, 1280, 744)

mas achei que a tela era muito curta e isso significava que era preciso rolar em páginas em pdf - gosto bastante de mídia paginada, mas nunca se deve misturar paginação e rolagem

e então pensei em obter uma tela que não seja mais curta que uma página de carta, como o modo retrato 21,5 polegadas (mas é difícil encontrar um LCD desse tamanho na faixa de 108+ dpi por mais de 250 nos)

1
Dan D.