Dimensões do ecrã do telefone para modelos populares

No mundo de hoje, há muitos dispositivos entre os quais as pessoas podem escolher, e pode ser assustador se tentar colocar e construir para a melhor experiência em todos os dispositivos. Contudo, ao conceber websites e dispositivos móveis, é importante estar ciente das dimensões e resoluções mais populares do ecrã do telefone para que possa fazer corresponder o seu design ao ecrã dos seus telespectadores. Um website optimizado e reactivo facilita o fluxo dos utilizadores e acaba por agradar ao seu público.

Dimensões do ecrã do telefone vs Área de visualização

Quando compra um dispositivo, tanto o tamanho do ecrã como a resolução especificada nas especificações são frequentemente apresentados. A sensibilidade do ecrã é a medida diagonal do ecrã na diagonal, em polegadas. Isto não deve ser confundido com a resolução, que é o número de pixels no ecrã, frequentemente apresentado em termos de largura em altura (ou seja, 1024×768). Como os dispositivos com o mesmo tamanho de ecrã podem ter resoluções muito diferentes, os programadores utilizam janelas de visualização quando criam páginas móveis fáceis de utilizar. Os Viewports têm versões mais pequenas de resolução, o que lhe permite visualizar websites em diferentes dispositivos de forma mais consistente. Os Viewports são frequentemente mais padronizados e têm uma resolução inferior à resolução.

Embora os monitores de secretária e portáteis sejam horizontais (mais altos), muitos dispositivos móveis podem ser rodados para exibir sites na orientação horizontal e vertical (mais altos do que a largura). Isto significa que os desenhadores e programadores têm de desenhar tendo em mente estas diferenças. Enquanto os monitores de secretária e portáteis são horizontais (mais altos), muitos dispositivos móveis podem ser rodados para mostrar sítios na orientação horizontal e vertical (mais altos do que a largura). Isto significa que os designers e programadores têm de conceber com estas diferenças em mente.

Need ajuda a determinar se o seu sítio é responsivo? Use a nossa ferramenta gratuita de visualização de resposta.

Codificação para diferentes dimensões do ecrã do telefone

Seria quase impossível para as empresas conceberem cada dispositivo individualmente. Em vez disso, os programadores agrupam frequentemente projectos responsivos:

Estilos de grupo nos tamanhos mais comuns para telefones, tablets, e desktops. Neste caso, qualquer coisa maior que 7 polegadas é tipicamente exibida com uma resolução de secretária ou… Utilizar pontos de quebra (definidos pela largura dos pixels, que a exibição irá ajustar de acordo com o tamanho do ecrã), dependendo do design e da localização. Por vezes, o programador pode combinar ambos os métodos, se achar necessário. Recomenda-se que comece por agrupar os tamanhos típicos dos dispositivos.

Se for um programador e quiser criar os estilos necessários para trabalhar com estilo móvel ou responsivo, incluímos um fragmento de CSS abaixo que pode ajudar. É importante notar que estes pontos de quebra não são fixos para todos os sítios e só devem ser usados como guia para começar:

Exemplos:

media and (Maximum width: 991 pixels) { ** "The beginning of great styles of pills}media and (maximum width: 767 pixels) { ** The beginning of medium styles of pills}screen @media and (maximum width: 479px) { ** "The beginning of phone styles}

Quais são as dimensões de ecrã mais populares?

Conhecendo que é importante considerar diferentes dispositivos ao desenhar sítios web, compilámos uma lista dos dispositivos mais modernos com tamanhos de pixel correspondentes e janelas de visualização, que é dada abaixo. Esta é uma lista condensada, pode encontrar uma lista mais abrangente que inclui densidade de pixels, resoluções físicas e CSS (pixels por polegada quadrada, ‘ppi’) aqui.