Para ver um site como no iPad no Chrome, escolha um preset de iPad numa extensão de visualização mobile, que recarrega a aba no tamanho de tablet a partir de um botão na barra de ferramentas. Sem extensão, abra o DevTools, ative a barra de dispositivos (Ctrl + Shift + M, ou Cmd + Shift + M no Mac) e escolha um iPad na lista Dimensions ou digite um tamanho de tablet como 820 × 1180. Antes de confiar no que você vê, porém, leia a seção sobre o Safari no iPad abaixo: iPads reais costumam carregar a versão desktop dos sites.
Por que é fácil errar no teste em tablet
Os tablets ficam no meio desconfortável do design responsivo. A largura deles na vertical (de cerca de 744 a 1032 pixels CSS nos iPads atuais) cai bem em cima dos breakpoints mais comuns, 768 px e 1024 px. Um layout pode alternar entre “celular” e “desktop” quando o tablet gira, e é justamente aí que cabeçalhos fixos, menus laterais e grids de várias colunas costumam quebrar.
Existe uma segunda armadilha, que não tem nada a ver com largura.
O Safari no iPad pede o site desktop por padrão
Desde o iPadOS 13, o Safari no iPad pede por padrão a versão desktop dos sites. Ele envia um user agent parecido com o do Safari no Mac, e não com o de um iPad. Isso significa que:
- um servidor que detecta aparelhos móveis pelo user agent vai tratar o iPad como um computador
- seu CSS continua seguindo a largura real da viewport, então as media queries funcionam como esperado
- a entrada continua sendo só por toque, embora o site ache que está falando com um Mac
Então, ao emular um iPad no Chrome com user agent de “iPad”, você pode ver uma versão do site que usuários reais de iPad nunca recebem. Para um teste honesto, confira as duas: a viewport do iPad com user agent mobile/iPad e a mesma viewport com user agent de desktop. No DevTools, você pode substituir o user agent em More tools > Network conditions; os passos estão em como mudar o user agent no Chrome.
Método 1: uma extensão de visualização mobile com presets de tablet
O jeito mais rápido, principalmente se você confere layouts de tablet com frequência, é uma extensão. O Mobile View Extension tem presets de tablet ao lado dos de celular, suporta vertical e horizontal e permite digitar uma resolução personalizada quando o aparelho que você quer não está na lista. Ele recarrega a aba com o user agent e o tamanho de tela correspondentes e mantém essa visualização enquanto você navega. Como qualquer prévia dentro do navegador, usa o mouse, e não entrada por toque.
Método 2: modo dispositivo do DevTools
O DevTools não precisa de instalação e acrescenta emulação de toque e o inspetor:
- Abra o DevTools e ative a barra de dispositivos.
- No menu Dimensions, escolha um modelo de iPad se ele estiver listado. Se não estiver, clique em Edit e ative mais aparelhos, ou escolha Responsive e digite o tamanho.
- Gire com o ícone de rotação para testar na horizontal.
- Recarregue a página.
O modo dispositivo também emula eventos de toque, o que ajuda ao testar menus de tablet que abrem com um toque. Mais detalhes no guia do emulador mobile do Chrome.
Método 3: Simulator do Xcode para o Safari real do iPad
No Mac, o Simulator do Xcode roda o iPadOS real com Safari. Ele mostra o comportamento de “site desktop” descrito acima, a renderização própria do Safari e o teclado na tela. É gratuito, mas pesado, e só funciona no macOS. Veja como testar um site no iPhone sem iPhone; os passos para iPad são os mesmos.
Tamanhos de viewport dos iPads atuais
São tamanhos de viewport CSS na vertical, obtidos dividindo as resoluções de tela publicadas pela Apple por uma densidade de pixels de 2.
| Modelo de iPad | Tela | Resolução física | Viewport CSS (vertical) |
|---|---|---|---|
| iPad mini (6ª e 7ª geração) | 8,3” | 1488 × 2266 | 744 × 1133 |
| iPad (10ª geração e A16) | 10,9–11” | 1640 × 2360 | 820 × 1180 |
| iPad Air de 11” (M2 e posteriores) | 11” | 1640 × 2360 | 820 × 1180 |
| iPad Air de 13” (M2 e posteriores) | 13” | 2048 × 2732 | 1024 × 1366 |
| iPad Pro de 11” (M4 e posteriores) | 11” | 1668 × 2420 | 834 × 1210 |
| iPad Pro de 13” (M4 e posteriores) | 13” | 2064 × 2752 | 1032 × 1376 |
Confira a página de especificações técnicas da Apple para o modelo exato que você quer atingir, porque a Apple renova os iPads com frequência.
Tablets Android variam muito mais. Um conjunto útil para testes é 800 × 1280, 600 × 960 (tablets pequenos de 7–8 polegadas) e um tamanho largo na horizontal, como 1280 × 800.
O que conferir no tamanho de tablet
- Navegação. O menu passa de hambúrguer para barra completa numa largura em que a barra completa realmente cabe?
- Grids. Grids de cards com três colunas viram grids de duas colunas apertados, com itens sobrando?
- Interações só por hover. Dropdowns que abrem no hover não fazem nada numa tela touch. Garanta que eles também abram com um toque.
- Horizontal. Gire e confira de novo: 1180 px de largura na horizontal podem acionar o layout de desktop numa tela de 10,9 polegadas.
- Imagens e vídeo. Tablets têm telas de alta densidade, então imagens de baixa resolução ficam borradas.
Breakpoints que funcionam bem para tablets estão em breakpoints responsivos.
Perguntas frequentes
Que tamanho de tela usar para testar no iPad?
Comece com 820 × 1180 (iPad e iPad Air de 11”) e 1024 × 1366 (modelos de 13”), nas duas orientações. Acrescente 744 × 1133 se o iPad mini for relevante para o seu público.
Por que meu site mostra a versão desktop no iPad?
O Safari no iPad pede sites desktop por padrão e envia um user agent parecido com o de um Mac. Se o seu site escolhe a versão pelo user agent, o iPad recebe a de desktop. Um layout responsivo baseado na largura do CSS evita o problema.
Dá para testar a visualização de tablet no Chrome sem o DevTools?
Sim. Uma extensão de visualização mobile com presets de tablet, como o Mobile View Extension, mostra tamanhos de tablet a partir de um botão na barra de ferramentas.