Pour afficher un site comme sur iPad dans Chrome, ouvrez les DevTools, activez la barre d’appareils (Ctrl + Shift + M, ou Cmd + Shift + M sur Mac) et choisissez un iPad dans la liste Dimensions, ou saisissez une taille de tablette comme 820 × 1180. Une extension de vue mobile avec des préréglages de tablette fait la même chose depuis un bouton de la barre d’outils. Avant de vous fier au résultat, lisez toutefois la section sur Safari pour iPad ci-dessous : les vrais iPad chargent souvent la version desktop d’un site.
Pourquoi on se trompe facilement en testant sur tablette
Les tablettes occupent un entre-deux délicat du responsive design. Leur largeur en portrait (de 744 à 1 032 pixels CSS environ pour les iPad actuels) tombe pile sur les breakpoints les plus courants, 768 px et 1 024 px. Une mise en page peut basculer entre « téléphone » et « desktop » quand on fait pivoter la tablette, et c’est justement là que les en-têtes fixes, les menus latéraux et les grilles à plusieurs colonnes ont tendance à casser.
Il existe un second piège, qui n’a rien à voir avec la largeur.
Safari sur iPad demande la version desktop par défaut
Depuis iPadOS 13, Safari sur iPad demande par défaut la version desktop des sites. Il envoie un user agent qui ressemble à celui de Safari sur Mac, et non à celui d’un iPad. Conséquences :
- un serveur qui détecte les appareils mobiles par le user agent traitera l’iPad comme un ordinateur ;
- votre CSS suit toujours la vraie largeur de la zone d’affichage, donc les media queries se comportent normalement ;
- la saisie reste uniquement tactile, alors que le site croit s’adresser à un Mac.
Quand vous émulez un iPad dans Chrome avec un user agent « iPad », vous risquez donc de voir une version de votre site que les vrais utilisateurs d’iPad ne reçoivent jamais. Pour un test honnête, vérifiez les deux : la zone d’affichage de l’iPad avec un user agent mobile/iPad, et la même zone avec un user agent desktop. Dans les DevTools, vous pouvez remplacer le user agent dans More tools > Network conditions ; les étapes sont dans comment changer le user agent dans Chrome.
Méthode 1 : le mode appareil des DevTools
- Ouvrez les DevTools et activez la barre d’appareils.
- Dans le menu Dimensions, choisissez un modèle d’iPad s’il figure dans la liste. Sinon, cliquez sur Edit pour activer d’autres appareils, ou choisissez Responsive et saisissez la taille.
- Faites pivoter avec l’icône de rotation pour tester le paysage.
- Rechargez la page.
Le mode appareil émule aussi les événements tactiles, ce qui aide à tester les menus de tablette qui s’ouvrent au toucher. Plus de détails dans le guide de l’émulateur mobile de Chrome.
Méthode 2 : une extension de vue mobile avec préréglages de tablette
Si vous vérifiez souvent les mises en page tablette, une extension est plus rapide. Mobile View Extension propose des préréglages de tablette à côté des téléphones, gère le portrait et le paysage, et permet de saisir une résolution personnalisée quand l’appareil visé n’est pas dans la liste. Elle recharge l’onglet avec le user agent et la taille d’écran correspondants et garde cette vue pendant la navigation. Comme tout aperçu dans le navigateur, elle s’utilise à la souris et non au toucher.
Méthode 3 : le Simulator de Xcode pour le vrai Safari sur iPad
Sur Mac, le Simulator de Xcode fait tourner le vrai iPadOS avec Safari. Il montre le comportement « version desktop » décrit plus haut, le rendu propre à Safari et le clavier à l’écran. Il est gratuit mais volumineux, et réservé à macOS. Voir comment tester un site sur iPhone sans iPhone : les étapes sont les mêmes pour l’iPad.
Tailles d’affichage des iPad actuels
Ce sont les tailles de zone d’affichage CSS en portrait, obtenues en divisant les résolutions publiées par Apple par un ratio de pixels de 2.
| Modèle d’iPad | Écran | Résolution physique | Zone d’affichage CSS (portrait) |
|---|---|---|---|
| iPad mini (6e et 7e génération) | 8,3 po | 1488 × 2266 | 744 × 1133 |
| iPad (10e génération et A16) | 10,9–11 po | 1640 × 2360 | 820 × 1180 |
| iPad Air 11 pouces (M2 et suivants) | 11 po | 1640 × 2360 | 820 × 1180 |
| iPad Air 13 pouces (M2 et suivants) | 13 po | 2048 × 2732 | 1024 × 1366 |
| iPad Pro 11 pouces (M4 et suivants) | 11 po | 1668 × 2420 | 834 × 1210 |
| iPad Pro 13 pouces (M4 et suivants) | 13 po | 2064 × 2752 | 1032 × 1376 |
Consultez la fiche technique d’Apple pour le modèle exact que vous ciblez, car Apple renouvelle souvent ses iPad.
Les tablettes Android varient bien davantage. Un jeu utile pour tester : 800 × 1280, 600 × 960 (petites tablettes de 7–8 pouces) et une grande taille en paysage comme 1280 × 800.
Ce qu’il faut vérifier au format tablette
- La navigation. Le menu passe-t-il du hamburger à une barre complète à une largeur où la barre tient vraiment ?
- Les grilles. Les grilles de cartes à trois colonnes deviennent-elles des grilles à deux colonnes trop serrées, avec des éléments orphelins ?
- Les interactions au survol uniquement. Les menus déroulants qui s’ouvrent au survol ne font rien sur un écran tactile. Vérifiez qu’ils s’ouvrent aussi au toucher.
- Le paysage. Faites pivoter et revérifiez : 1 180 px de large en paysage peuvent déclencher votre mise en page desktop sur un écran de 10,9 pouces.
- Images et vidéos. Les tablettes ont des écrans haute densité : les images basse résolution paraissent floues.
Les breakpoints adaptés aux tablettes sont abordés dans breakpoints responsive.
Questions fréquentes
Quelle taille d’écran utiliser pour tester sur iPad ?
Commencez par 820 × 1180 (iPad et iPad Air 11 pouces) et 1024 × 1366 (modèles 13 pouces), dans les deux orientations. Ajoutez 744 × 1133 si l’iPad mini compte pour votre audience.
Pourquoi mon site affiche-t-il la version desktop sur iPad ?
Safari sur iPad demande les sites desktop par défaut et envoie un user agent semblable à celui d’un Mac. Si votre site choisit sa version selon le user agent, l’iPad reçoit la version desktop. Une mise en page responsive fondée sur la largeur CSS évite le problème.
Peut-on tester une vue tablette dans Chrome sans les DevTools ?
Oui. Une extension de vue mobile avec préréglages de tablette, comme Mobile View Extension, affiche les tailles de tablette depuis un bouton de la barre d’outils.