11 dispositivos · Smartphones
Dispositivos Xiaomi: viewport CSS, densidade e resolução de tela
As características de exibição dos 11 dispositivos Xiaomi referenciados, com a largura na qual suas media queries ressoam, sua densidade de pixel e a resolução de sua tela. 7 desses dispositivos podem ser testados diretamente no seu navegador.
Smartphones Xiaomi
6 larguras CSS distintas cobrem toda a gama: 360, 393, 400, 406, 423 e 427 px. Vários modelos compartilham a mesma: validar um deles é suficiente para validar os outros.
| Modelo | Viewport CSS | Densidade | Resolução da tela | Diagonal | Ano |
|---|---|---|---|---|---|
| Xiaomi 17T | 423 × 919 | 3x | 1268 × 2756 | 6,6" | 2026 |
| Xiaomi 17T Pro | 427 × 924 | 3x | 1280 × 2772 | 6,8" | 2026 |
| Xiaomi Redmi Note 17 | 393 × 871 | 2.75x | 1080 × 2396 | 7" | 2026 |
| Xiaomi 17 | 406 × 885 | 3x | 1220 × 2656 | 6,3" | 2025 |
| Xiaomi 17 Ultra | 400 × 869 | 3x | 1200 × 2608 | 6,9" | 2025 |
| Xiaomi 12 | 360 × 800 | 3x | 1080 × 2400 | 6,7" | 2021 |
| Xiaomi Mi 11i | 360 × 800 | 3x | 1080 × 2400 | 6,7" | 2021 |
| Xiaomi Redmi Note 9 Pro | 393 × 873 | 2.75x | 1080 × 2400 | 6,7" | 2020 |
| Xiaomi Redmi Note 7 | 393 × 851 | 2.75x | 1080 × 2340 | 6,3" | 2019 |
| Xiaomi Redmi Note 8 | 393 × 851 | 2.75x | 1080 × 2340 | 6,3" | 2019 |
| Xiaomi Redmi Note 8 Pro | 393 × 851 | 2.75x | 1080 × 2340 | 6,5" | 2019 |
Quais larguras testar em prioridade
As larguras mais representadas da gama são 360, 393, 400 e 406 px. Verificá-las primeiro cobre 9 dos 11 modelos Xiaomi referenciados, e é sobre elas que seus primeiros breakpoints devem incidir.
Desça até 360 px para cobrir toda a gama, incluindo Xiaomi 12: um layout que se adapta a essa largura se adapta em qualquer lugar, inclusive nos modelos mais antigos ainda em circulação.
Atenção à altura: os navegadores móveis reduzem a área visível com suas barras de interface, e estas se retraem ao rolar. Uma altura de 100vh, portanto, transborda da primeira tela; as unidades svh e dvh são preferíveis.
Teste seu site em 7 dispositivos Xiaomi, sem comprar nenhum
As tabelas fornecem as medidas. A extensão exibe seu site no viewport exato do modelo, com sua densidade, seu User-Agent e a alternância entre retrato e paisagem.
- 7 dispositivos Xiaomi prontos para uso, desde modelos antigos até os lançamentos do ano
- Capturas e vídeos exportados no formato do dispositivo
- Funciona nos seus ambientes locais e suas pré-produções
Grátis · 4,93/5 em 5.100 avaliações
1.600.000+ usuários
Outras marcas
Perguntas frequentes
Qual é o viewport CSS mais comum na Xiaomi?
393 x 871 px, compartilhado por 5 dos 11 modelos referenciados, incluindo Xiaomi Redmi Note 17 e Xiaomi Redmi Note 9 Pro. É a largura a verificar primeiro nesta gama.
Qual largura mínima testar para cobrir os dispositivos Xiaomi?
360 px, a largura do modelo mais estreito da lista, Xiaomi 12. Se o seu layout cabe em 360 px, ele cabe nos 11 dispositivos Xiaomi referenciados, até o mais largo que atinge 427 px.
Por que a resolução anunciada pela Xiaomi não corresponde ao viewport CSS?
Porque essas telas exibem vários pixels físicos por pixel CSS. Xiaomi 17T tem uma tela de 1268 x 2756 pixels e um viewport CSS de 423 x 919 px, com uma densidade de 3. É o segundo valor que deve ser escrito em uma media query.
Como testar seu site em um dispositivo Xiaomi sem ter um?
Com a extensão Mobile FIRST: ela reproduz o viewport, a densidade de pixel, o User-Agent e os eventos táteis de 7 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.
As marcas e modelos citados pertencem aos seus respectivos proprietários.