6 dispositivos · Smartphones
Dispositivos Xiaomi: viewport CSS, densidade e resolução de tela
As características de exibição dos 6 dispositivos Xiaomi referenciados, com a largura na qual suas media queries ressoam, sua densidade de pixel e a resolução de sua tela. 2 desses dispositivos podem ser testados diretamente no seu navegador.
Smartphones Xiaomi
2 larguras CSS distintas cobrem toda a gama: 360 e 393 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 12 2022 | 360 × 800 | 3x | 1080 × 2400 | 6,7" | 2022 |
| 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 e 393 px. Verificá-las primeiro cobre 6 dos 6 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 2022: 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 2 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.
- 2 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,9/5 em 5.100 avaliações
1.500.000+ usuários
Outras marcas
Perguntas frequentes
Qual é o viewport CSS mais comum na Xiaomi?
393 x 873 px, compartilhado por 4 dos 6 modelos referenciados, incluindo Xiaomi Redmi Note 9 Pro e Xiaomi Redmi Note 7. É 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 2022. Se o seu layout cabe em 360 px, ele cabe nos 6 dispositivos Xiaomi referenciados, até o mais largo que atinge 393 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 12 2022 tem uma tela de 1080 x 2400 pixels e um viewport CSS de 360 x 800 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 2 desses modelos, diretamente no seu navegador, inclusive em um endereço localhost.
As marcas e modelos citados pertencem aos seus respectivos proprietários.