iPhone 12 Mini: tamanho do viewport

375 × 812 píxeis CSS · telemóvel Apple

O viewport do iPhone 12 Mini usado pelo Mobile Preview é de 375 × 812 píxeis CSS na vertical e 812 × 375 na horizontal. A câmara é: notch.

O tamanho num relance

Vertical375 × 812 px
Horizontal812 × 375 px
Proporção altura / largura2.17
Câmaranotch
Tailwind (vertical)abaixo de sm (menos de 640 px)
Tailwind (horizontal)md (a partir de 768 px)

São píxeis CSS (de layout), os tamanhos do quadro do Mobile Preview. Num dispositivo real podem variar ligeiramente com a interface do navegador, o zoom do ecrã ou a versão do sistema.

Teste em CSS

Prefira breakpoints baseados no seu conteúdo em vez de regras por dispositivo. Se precisar de reproduzir este tamanho exato, por exemplo para depurar um layout, esta media query seleciona-o na vertical:

@media (width: 375px) and (height: 812px) {
  /* iPhone 12 Mini, vertical */
}

O recorte (notch) invade a parte superior do ecrã em layouts de ecrã inteiro. Adicione viewport-fit=cover à meta viewport e aplique padding com env(safe-area-inset-top) aos cabeçalhos fixos para que nada fique escondido.

Pré-visualizar o iPhone 12 Mini no VS Code

O quadro iPhone 12 Mini faz parte do Mobile Preview Pro (6,99 €, pagamento único, sem subscrição). A versão gratuita inclui o iPhone 16, o iPhone 17 e o iPhone 17 Pro Max. Instale a extensão, inicie o servidor de desenvolvimento, execute «Mobile Preview: Show» e escolha iPhone 12 Mini no menu de dispositivos: a sua página aparece no quadro ao lado do código e recarrega ao guardar.

Instalar o Mobile Preview · Guia passo a passo (em inglês)

Larguras semelhantes

Perguntas frequentes

Qual é o tamanho do viewport do iPhone 12 Mini em píxeis CSS?
375 × 812 na vertical (largura × altura) e 812 × 375 na horizontal, conforme usado pelo Mobile Preview. O ecrã físico tem mais píxeis; os píxeis CSS são o que o seu layout vê.
Em que breakpoint do Tailwind está o iPhone 12 Mini?
Com os breakpoints por defeito do Tailwind, o iPhone 12 Mini está abaixo de sm (menos de 640 px) na vertical e md (a partir de 768 px) na horizontal.
Posso pré-visualizar o meu site no iPhone 12 Mini dentro do VS Code?
Sim. O quadro iPhone 12 Mini faz parte do Mobile Preview Pro (6,99 €, pagamento único). A versão gratuita inclui o iPhone 16, o iPhone 17 e o iPhone 17 Pro Max.

Todos os tamanhos de dispositivos · EN · FR · ES · DE