O viewport do iPhone 15 usado pelo Mobile Preview é de 393 × 852 píxeis CSS na vertical e 852 × 393 na horizontal. A câmara é: Dynamic Island.
O tamanho num relance
| Vertical | 393 × 852 px |
|---|---|
| Horizontal | 852 × 393 px |
| Proporção altura / largura | 2.17 |
| Câmara | Dynamic Island |
| 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: 393px) and (height: 852px) {
/* iPhone 15, vertical */
}O recorte (Dynamic Island) 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.
Dispositivos com o mesmo viewport que o iPhone 15
Estes quadros usam o mesmo viewport de 393 × 852, por isso uma única verificação cobre todos:
Pré-visualizar o iPhone 15 no VS Code
O quadro iPhone 15 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 15 no menu de dispositivos: a sua página aparece no quadro ao lado do código e recarrega ao guardar.
Larguras semelhantes
- iPhone 11 (414 × 896)
- iPhone 12 Mini (375 × 812)
- iPhone 13 Pro (390 × 844)
- iPhone 16 Pro (402 × 874)
- iPhone 17 (402 × 874)
- iPhone 17 Pro (402 × 874)
Perguntas frequentes
- Qual é o tamanho do viewport do iPhone 15 em píxeis CSS?
- 393 × 852 na vertical (largura × altura) e 852 × 393 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 15?
- Com os breakpoints por defeito do Tailwind, o iPhone 15 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 15 dentro do VS Code?
- Sim. O quadro iPhone 15 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