Zebra MC330 : viewport CSS de 480 × 800 px, resolução e teste responsivo

Zebra · Android 10.0 · Smartphone

Todas as características de exibição Zebra MC330, smartphone Zebra: viewport CSS de 480 x 800 pixels, densidade de 1x, media queries e teste responsivo em um clique.

Teste seu site no Zebra MC330 diretamente no seu navegador, sem comprar o dispositivo.

  • Zebra MC330 disponível na lista de dispositivos
  • Viewport, User-Agent e eventos táteis reais
  • Funciona também em localhost e em pré-produção
  • Capturas de tela e vídeos exportáveis
Instalar a extensão

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

Por que testar seu site no Zebra MC330?

Tela grande móvel

Com 480 pixels de largura, Zebra MC330 já faz com que alguns layouts mudem para seu breakpoint de tablet. Um teste evita colunas muito esticadas e áreas de texto ilegíveis.

Densidade de 1x

Com uma densidade de 1x, Zebra MC330 fornece a referência útil para verificar se suas imagens permanecem nítidas sem fornecer arquivos desnecessariamente pesados.

Conexão WIFI

Este modelo é representativo de um uso em WIFI. Testar nele é verificar se sua página permanece utilizável quando as imagens e fontes chegam lentamente.

Resolução do viewport CSS Zebra MC330

É a largura sobre a qual seu CSS raciocina. Todos os seus breakpoints e todas as suas media queries são comparados a esse valor, não ao número de pixels físicos da tela.

  • 480 pixels em largura
  • 800 pixels em altura

A altura permanece indicativa: Safari, Chrome e outros navegadores móveis reduzem a área visível com sua barra de endereço, que se retrai ao rolar.

Atenção ao analisar suas estatísticas: algumas ferramentas só mostram a resolução do fabricante, nunca o viewport CSS apresentado aqui.

Densidade de pixel Zebra MC330

1

O device pixel ratio Zebra MC330 é de 1.

Suas imagens devem, portanto, ser exportadas 1 vezes maiores que seu tamanho de exibição, caso contrário, aparecerão suavizadas nesta tela.

Resolução do fabricante Zebra MC330

Este é o número real de pixels da tela. Este valor não interfere em seus layouts, mas é o que aparece nas fichas técnicas e na maioria das ferramentas de análise.

  • 480 pixels em largura
  • 800 pixels em altura
  • 5:3 Proporção de tela

User-Agent Zebra MC330

Esta cadeia é a que o navegador Zebra MC330 envia. Ela é útil para seus testes automatizados, a leitura de seus logs de servidor e a detecção do lado do servidor.

User-Agent

Cadeia User-Agent usada por Zebra MC330, útil para seus testes automatizados e seus logs.

Mozilla/5.0 (Linux; Android 10; MC3300) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.6778.260 Mobile Safari/537.36

Media queries e trechos de código para Zebra MC330

Esses trechos são gerados a partir das características exatas Zebra MC330. Copie-os diretamente para sua folha de estilo ou configuração.

Media query CSS

Direciona as telas cuja largura corresponde à de Zebra MC330 e aos modelos de mesmo formato.

@media only screen and (min-width: 480px) and (max-width: 799px) {
  /* Zebra MC330 */
}

Media query de densidade

Serve imagens de alta resolução para telas de pelo menos 1x.

@media only screen and (-webkit-min-device-pixel-ratio: 1),
       only screen and (min-resolution: 96dpi) {
  /* Imagens e ícones de alta densidade */
}

Configuração Tailwind

Adiciona um breakpoint nomeado à largura exata Zebra MC330.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'zebra-mc330': '480px'
    }
  }
}

Detecção em JavaScript

Detecta o formato e a densidade no lado do cliente.

const isDeviceWidth = window.matchMedia('(min-width: 480px)').matches;
const isHighDensity = window.devicePixelRatio >= 1;

Tag meta viewport

Indispensável para que Zebra MC330 use seu viewport CSS e não uma largura simulada de 980 pixels.

<meta name="viewport" content="width=device-width, initial-scale=1">

Simulador Zebra MC330 gratuito

Mobile FIRST inclui Zebra MC330: sua página é exibida em um viewport de 480 x 800 pixels, com o User-Agent do modelo, os eventos táteis e o comportamento de rolagem de um verdadeiro celular.

É aí que a diferença com o modo responsivo do Chrome DevTools é visível: o DevTools redimensiona uma janela, a extensão reproduz o navegador do dispositivo e permite exportar capturas e vídeos compartilháveis.

  1. 01 Instalar a extensão Adicione Mobile FIRST ao Chrome, Firefox ou Edge. A instalação é gratuita e não requer conta.
  2. 02 Abrir a página a testar Acesse a URL a ser verificada, incluindo um endereço local como localhost:3000.
  3. 03 Escolher Zebra MC330 Selecione Zebra MC330 na lista de dispositivos. O viewport muda para 480 x 800 pixels e o User-Agent móvel é aplicado.
  4. 04 Verificar o render Role, mude a orientação, teste seus formulários, e então capture uma imagem ou vídeo para compartilhar.

Comparativo com modelos próximos

Os formatos vizinhos Zebra MC330 são aqueles a serem testados logo em seguida, pois são eles que revelam os breakpoints mal posicionados.

Comparativo das resoluções Zebra MC330 e dos modelos próximos
Modelo Viewport CSS Densidade de pixel Resolução do fabricante
Zebra MC330 480 x 800 1x 480 x 800
Zebra TC78 412 x 818 2.625x 1082 x 2147
Google Pixel 10 PRO 410 x 912 3.125x 1281 x 2850
Google Pixel 8 412 x 915 2.625x 1080 x 2400
OnePlus Nord 2 412 x 915 2.625x 1080 x 2400
Google Pixel 10 412 x 924 2.625x 1082 x 2426
Apple iPhone Air 420 x 912 3x 1260 x 2736

Perguntas frequentes sobre Zebra MC330

Qual é a resolução do viewport CSS Zebra MC330?

O viewport CSS Zebra MC330 mede 480 pixels de largura e 800 pixels de altura. É essa largura que deve ser usada para definir suas media queries, não a resolução do fabricante.

Qual é a densidade de pixel Zebra MC330?

O device pixel ratio Zebra MC330 é de 1. Portanto, cada pixel CSS é exibido por 1 pixels físicos, o que exige fornecer suas imagens em 1x para que permaneçam nítidas.

Qual é a resolução de tela Zebra MC330?

A tela Zebra MC330 exibe 480 x 800 pixels físicos. É o valor que a maioria das ferramentas de análise retorna, enquanto seu CSS trabalha em um viewport de 480 x 800 pixels.

Qual é o User-Agent Zebra MC330?

O User-Agent Zebra MC330 é: Mozilla/5.0 (Linux; Android 10; MC3300) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.6778.260 Mobile Safari/537.36

Como testar meu site no Zebra MC330 sem o dispositivo?

Instale a extensão Mobile FIRST no Chrome, Firefox ou Edge, e selecione Zebra MC330. Sua página será exibida em um viewport de 480 x 800 pixels com o User-Agent móvel correspondente, em dois cliques e gratuitamente.

Qual a diferença com o modo responsivo do Chrome DevTools?

DevTools redimensiona a janela e aplica uma emulação parcial. Mobile FIRST aplica além disso o User-Agent Zebra MC330, os eventos táteis, o comportamento de rolagem e a aparência real do dispositivo, e permite capturar imagens e vídeos diretamente utilizáveis.

Posso testar um endereço em localhost no Zebra MC330?

Sim. A extensão funciona em qualquer URL aberta no seu navegador, incluindo localhost:3000, 127.0.0.1 ou um ambiente de pré-produção protegido por senha.

É necessário comprar um Zebra MC330 para testar seu site?

Não. A simulação cobre a imensa maioria das necessidades de desenvolvimento a custo zero. Um teste final em dispositivo real ainda é recomendado antes de uma produção crítica, mas não é mais necessário a cada iteração.

Qual media query usar para direcionar Zebra MC330?

Uma media query na largura exata direciona Zebra MC330: @media only screen and (min-width: 480px). Combine-a com a densidade de pixel para direcionar precisamente este modelo e aqueles que compartilham seu formato.

Continuar o teste em outro modelo

Todos os dispositivos →

Outros modelos Zebra

Teste seu site em 81 dispositivos, diretamente no seu navegador

Sem comprar um único telefone, sem criar uma conta.

  • 81 dispositivos disponíveis desde a instalação
  • Viewport, User-Agent e eventos táteis reais
  • Funciona também em localhost e em pré-produção
  • Capturas de tela e vídeos exportáveis
Instalar a extensão

Instalação gratuita em segundos · apenas para computador