Base de dispositivos · 168 modelos · 18 marcas

Todos os dispositivos: viewport CSS, densidade e resolução de tela

Smartphones, tablets, computadores e relógios conectados, com para cada um a largura sobre a qual suas media queries são baseadas, sua densidade de pixel e a resolução de sua tela. 77 desses dispositivos podem ser testados diretamente no seu navegador.

Um iPhone, um Pixel, um iPad e um smartphone Android exibindo cada um um site web no simulador Mobile FIRST

Dispositivos por marca

18 marcas · 168 modelos

Cada modelo leva à sua ficha: viewport CSS, densidade de pixel, resolução do fabricante, diagonal, User-Agent e media queries prontas para copiar. A pesquisa filtra pelo nome, marca, largura em pixels ou ano.

168 dispositivos exibidos

Smartphones Samsung 53 modelos

Tablets e computadores Samsung 3 modelos

Todos os dispositivos Samsung →

Smartphones Apple 41 modelos

Tablets, computadores e relógios conectados Apple 8 modelos

Todos os dispositivos Apple →

Google 17 modelos

Todos os dispositivos Google →

OnePlus 11 modelos

Todos os dispositivos OnePlus →

Huawei 9 modelos

Todos os dispositivos Huawei →

Xiaomi 6 modelos

Todos os dispositivos Xiaomi →

Honor 4 modelos

Dispositivos genéricos 2 modelos

HTC 2 modelos

Motorola 2 modelos

Sony 2 modelos

Zebra 2 modelos

Dell 1 modelo

Infinix 1 modelo

LG 1 modelo

Microsoft 1 modelo

OPPO 1 modelo

Sonoff 1 modelo

Últimos dispositivos adicionados

Atualizado a cada lançamento

As larguras de viewport mais comuns

Seis larguras cobrem a maior parte do parque móvel. São elas que devem ser verificadas prioritariamente antes de multiplicar os breakpoints na sua folha de estilo.

Larguras de viewport CSS mais representadas, com seus modelos típicos e suas densidades de pixel
Largura CSS Dispositivos representativos Densidade Modelos relevantes
360 px Infinix Hot 70Samsung Galaxy S24 (2024)Samsung Galaxy S22 (2022) 2x, 3x, 4x 54 modelos
375 px Apple iPhone 13 Mini (2021)Apple iPhone SE (2020)Apple iPhone 11 Pro 2x, 3x 8 modelos
390 px Apple iPhone 14 (2022)Apple iPhone 14 PRO (2022)Apple iPhone 13 (2021) 3x 6 modelos
393 px Apple iPhone 16 (2024)Apple iPhone 15 (2023)Apple iPhone 15 PRO (2023) 2.75x, 3x 12 modelos
412 px Galaxy S26 ULTRAGoogle Pixel 10Motorola Razr 70 Ultra 2.625x, 3x, 3.5x, 4x 40 modelos
414 px Apple iPhone 11Apple iPhone 11 Pro MaxApple iPhone XR 2x, 3x, 3.5x 9 modelos

Testar seu site em um dispositivo real, sem comprá-lo

Três etapas, cerca de trinta segundos, sem necessidade de criar conta.

  1. 01 Instale a extensão Ela se adiciona ao Chrome, Edge, Firefox, Safari ou Opera com um clique, sem necessidade de criar uma conta.
  2. 02 Escolha o dispositivo 77 modelos estão prontos para uso, com seu viewport CSS exato, sua densidade de pixel e seu User-Agent.
  3. 03 Abra seu site ao lado A renderização é exibida na moldura do dispositivo, inclusive em um endereço localhost, e você pode exportar uma captura ou um vídeo.

Como ler as características de um dispositivo

O viewport CSS é a única das três medidas que sua folha de estilo manipula. É a largura à qual seus breakpoints se comparam, aquela que decide o número de colunas exibidas e a versão da imagem servida. Um iPhone 16 anunciado em 1179 pixels pelo seu fabricante trabalha na realidade com 393 pixels CSS: é esse segundo valor que deve ser escrito em uma media query.

A densidade de pixel, ou device pixel ratio, é a relação entre os dois. Em 3x, cada pixel CSS é renderizado por nove pixels físicos: uma imagem exportada no seu tamanho de exibição parecerá suavizada, e é necessário fornecer uma versão duas ou três vezes maior. A resolução do fabricante, por sua vez, serve apenas para preparar esses exports e ler as estatísticas de audiência, nunca para escrever CSS.

A diagonal e a proporção completam o quadro: dois dispositivos com o mesmo viewport podem ter uma altura muito diferente, o que muda tudo para um menu fixo ou um banner no rodapé. É por isso que cada ficha também fornece a lista de modelos no formato estritamente idêntico: validar um deles é suficiente para validar os outros.

Perguntas frequentes

O que é o viewport CSS de um dispositivo?

É a largura, em pixels CSS, da área de exibição do navegador neste dispositivo. É o valor ao qual suas media queries se comparam, e quase sempre é menor que a resolução anunciada pelo fabricante.

Qual a diferença entre viewport CSS e resolução de tela?

A resolução é o número de pixels físicos da tela, o viewport CSS é a largura lógica na qual sua folha de estilo trabalha. A relação entre os dois é a densidade de pixel: uma tela de 1179 pixels em densidade 3x oferece 393 pixels CSS.

Quais larguras devem ser almejadas para seus breakpoints?

Nos 168 dispositivos referenciados, as larguras mais representadas são 360 px, 412 px, 393 px. Verificá-las primeiro cobre a maioria do parque móvel antes de adicionar breakpoints mais finos.

Como testar seu site nesses dispositivos?

Com a extensão Mobile FIRST: ela reproduz o viewport, a densidade de pixel, o User-Agent e os eventos táteis de 77 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.

A lista está atualizada?

Sim. O catálogo conta com 168 modelos distribuídos em 18 marcas, e é enriquecido a cada lançamento de novo dispositivo.

Teste seu site em 77 desses dispositivos, sem comprar nenhum

A tabela fornece as medidas. A extensão exibe seu site no viewport exato do dispositivo, com seu User-Agent e seus eventos táteis.

  • 77 dispositivos prontos para uso, de modelos antigos aos lançamentos do ano
  • Capturas e vídeos exportados no formato do dispositivo
  • Funciona nos seus ambientes locais e suas pré-produções
Instalar para Chrome Instalar para Firefox

Grátis · 4,9/5 em 5.100 avaliações
1.500.000+ usuários