iPhone 17 Pro Max: tamanho do viewport

440 × 956 píxeis CSS · telemóvel Apple

O viewport do iPhone 17 Pro Max usado pelo Mobile Preview é de 440 × 956 píxeis CSS na vertical e 956 × 440 na horizontal. A câmara é: Dynamic Island.

O tamanho num relance

Vertical440 × 956 px
Horizontal956 × 440 px
Proporção altura / largura2.17
CâmaraDynamic 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: 440px) and (height: 956px) {
  /* iPhone 17 Pro Max, 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 17 Pro Max

Estes quadros usam o mesmo viewport de 440 × 956, por isso uma única verificação cobre todos:

Pré-visualizar o iPhone 17 Pro Max no VS Code

O quadro iPhone 17 Pro Max está incluído na versão gratuita do Mobile Preview. Instale a extensão, inicie o servidor de desenvolvimento, execute «Mobile Preview: Show» e escolha iPhone 17 Pro Max 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 17 Pro Max em píxeis CSS?
440 × 956 na vertical (largura × altura) e 956 × 440 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 17 Pro Max?
Com os breakpoints por defeito do Tailwind, o iPhone 17 Pro Max 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 17 Pro Max dentro do VS Code?
Sim. O quadro iPhone 17 Pro Max está incluído na versão gratuita do Mobile Preview.

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