polyshVérificateur de taille du viewport
La taille exacte de la zone de page de votre navigateur et le point de rupture correspondant.
- Fonctionne dans votre navigateur
- Aucun envoi de fichier
- Aucun compte
Chargement de l'outil dans votre navigateur…
Ce que fait Vérificateur de taille du viewport
Les webdesigners, les testeurs QA et toute personne qui signale un bug de mise en page ont besoin de la même information : la largeur actuelle de la zone de page du navigateur. Le résultat principal l’affiche en pixels CSS, l’unité des media queries, et change en direct quand vous faites glisser le bord de la fenêtre.
Le tableau distingue la taille avec et sans barres de défilement, pour voir quand une barre verticale prend 15 ou 17 pixels. Il affiche aussi la zone d’affichage visuelle et le facteur de zoom tactile sur téléphone, et nomme la tranche de point de rupture, du téléphone au grand écran de bureau. Pour tout l’écran plutôt que la fenêtre, utilisez le vérificateur de résolution d’écran.
Exemple
Votre configuration
Chrome sur un MacBook, fenêtre de 1440 pixels CSS de large, barres de défilement superposées, ratio de pixels de l’appareil de 2
Le rapport affiche
Votre zone d’affichage : 1440 × 813 Pixels CSS · Très grand (1280–1535 px, ordinateur de bureau) Largeur de la barre de défilement : 0 px Zone d’affichage en pixels de l’appareil : 2880 × 1626
macOS masque les barres de défilement jusqu’à ce que vous fassiez défiler la page : elles ne prennent donc aucune largeur. Sous Windows, la même fenêtre affiche généralement une barre d’environ 15 px.
Mode d'emploi : Vérificateur de taille du viewport
- Ouvrez la page dans le navigateur et la fenêtre à mesurer.
- Redimensionnez la fenêtre et regardez la taille et le point de rupture se mettre à jour.
- Cliquez sur Copier pour joindre les valeurs à un rapport de bug.
Bon à savoir
- Les noms des points de rupture suivent les valeurs par défaut courantes à 640, 768, 1024, 1280 et 1536 px. Le CSS de votre propre site peut changer de mise en page à d’autres largeurs.
- L’outil mesure la zone de page, pas la fenêtre extérieure avec les onglets et la barre d’outils. Les outils de développement ancrés prennent aussi de la place sur le viewport.
- Le zoom du navigateur modifie le viewport en pixels CSS : une fenêtre de 1440 px zoomée à 125 % indique 1152 px.
Questions sur Vérificateur de taille du viewport
Quelle est la taille de la fenêtre de mon navigateur ?
Le résultat principal affiche la zone de page de cette fenêtre en pixels CSS, largeur en premier. C’est la taille que voient les pages web et celle que capture un enregistrement d’onglet. Redimensionnez la fenêtre et la valeur change immédiatement.
Quelle est la différence entre le viewport et la résolution de l’écran ?
La résolution de l’écran concerne tout l’affichage. Le viewport n’est que la partie de la fenêtre du navigateur où la page est dessinée, après la barre d’adresse, les onglets et le cadre de la fenêtre. Sur un ordinateur portable, le viewport est en général plus court que l’écran de quelques centaines de pixels.
À quelles tailles de viewport tester mon site ?
Couvrez une largeur de téléphone d’environ 375 à 430 px, une tablette vers 768 px, un ordinateur portable entre 1280 et 1440 px environ, et un grand écran de bureau à 1920 px. Vérifiez les largeurs juste en dessous de chacun de vos points de rupture, car les mises en page cassent souvent juste avant de basculer.
Pourquoi le viewport change-t-il quand le clavier s’ouvre sur mon téléphone ?
Les claviers à l’écran couvrent une partie de la page. Les navigateurs réduisent la zone d’affichage visuelle à la partie encore visible, alors que la zone d’affichage de mise en page reste souvent identique : c’est pourquoi les en-têtes et pieds de page fixes peuvent sauter.