Simulateur de résolution d’écran

À quoi ressemble votre page sur un autre écran ?

Vous concevez votre site sur votre ordinateur, alors que la plupart de vos visiteurs l'ouvrent sur leur téléphone. Le simulateur de résolution d'écran de Jood affiche n'importe quelle page à la largeur d'écran que vous choisissez, d'un téléphone Android de 360 pixels à un ordinateur de bureau de 1920. Vous voyez la disposition des colonnes, des menus et des images comme un visiteur sur cet appareil.

Mode d'emploi

1. Collez l'adresse dans le champ « URL de la page ».
2. Choisissez un appareil dans la liste « Résolution d’écran », ou prenez « Autre taille » et indiquez la largeur et la hauteur en pixels.
3. Cliquez sur « Commencer ». La page s'affiche à sa largeur réelle, puis elle est réduite pour tenir sur votre écran, avec le pourcentage de réduction.

La page dans l'aperçu est vivante : vous pouvez la faire défiler et cliquer sur ses liens.

Pourquoi 390 et pas 1170 ?

L'écran d'un iPhone compte plus de mille pixels en largeur, mais le navigateur le traite comme s'il en faisait 390 et dessine chacun de ces pixels avec plusieurs points pour garder un texte net. Ce sont ces tailles logiques que votre site voit, et c'est sur elles que reposent les règles du design adaptatif. La liste les utilise donc.

Les sites qui refusent d'être affichés dans un cadre

L'aperçu montre la page dans un cadre (iframe). Beaucoup de sites, comme Google, les banques ou les réseaux sociaux, l'interdisent pour des raisons de sécurité avec l'en-tête X-Frame-Options ou frame-ancestors. L'outil lit d'abord les en-têtes : s'il trouve cette interdiction, il vous le dit au lieu d'afficher un cadre vide et propose le bouton « Ouvrir dans une fenêtre de cette taille ». Sur ordinateur, ce bouton ouvre la page dans une fenêtre séparée aux dimensions choisies.

Les limites de l'aperçu

• Il ne change que la largeur de la page. Le site ne sait pas que vous êtes sur un téléphone : s'il envoie une version mobile selon le type d'appareil, vous ne la verrez pas ici.
• Il ne simule ni le tactile ni la densité de pixels, le texte peut donc paraître plus ou moins net que sur un vrai téléphone.
• Pour un contrôle précis, ouvrez les outils de développement de Chrome avec F12, puis le mode appareils avec Ctrl+Shift+M, et testez ensuite sur un vrai téléphone avant de publier.

Les tailles à tester

Essayez au moins 360 pour les petits téléphones, 390 pour l'iPhone, 768 pour les tablettes et 1366 pour les portables courants. C'est à ces seuils que les mises en page cassent le plus souvent : un menu qui ne devient pas un bouton, un tableau qui déborde, une image plus large que la page.

Une fois la mise en page correcte, vérifiez votre page côté moteurs de recherche avec l'Audit SEO complet du site.