Quelle est la résolution de mon écran ? Viewport, DPR et breakpoints | We.Inc
Voyez en direct la résolution de votre écran, la taille du viewport de votre navigateur et le device pixel ratio, ainsi que le breakpoint Tailwind et Bootstrap dans lequel vous êtes et un tableau des tailles d'appareils courantes.
La résolution de votre écran s'affiche dans le premier encadré de cette page, mesurée par votre navigateur au chargement. Elle est exprimée en pixels CSS ; multipliez-la par le device pixel ratio pour obtenir les pixels physiques. La page montre aussi le viewport de votre navigateur, c'est-à-dire la taille dont votre site dispose réellement, et se met à jour en direct quand vous redimensionnez.
Ce que signifie chaque valeur
Mesure
Ce que c'est
Écran
L'affichage entier, en pixels CSS
Viewport
La zone visible de la page dans la fenêtre du navigateur
Device pixel ratio
Pixels physiques par pixel CSS (2 ou 3 sur la plupart des téléphones)
Résolution physique
La taille de l'écran multipliée par le pixel ratio
Taille de l'écran, taille du viewport, device pixel ratio, orientation et profondeur de couleur, lus en direct depuis votre navigateur. L'outil indique aussi dans quel breakpoint Tailwind et Bootstrap se trouve la fenêtre actuelle, avec des media queries à copier et un tableau des tailles d'appareils courantes.
Ouvrez la page. Les valeurs proviennent des objets screen et window de votre navigateur : rien n'est installé et rien n'est envoyé nulle part.
Redimensionnez la fenêtre ou faites pivoter votre téléphone. Le viewport, le breakpoint et l'orientation se mettent à jour immédiatement.
Consultez le panneau des breakpoints pour voir quels breakpoints Tailwind et Bootstrap s'appliquent à la largeur actuelle.
Copiez une media query pour n'importe quel breakpoint, ou comparez vos valeurs avec le tableau des appareils ci-dessous.
Concevez pour des largeurs de viewport, pas pour des résolutions d'écran. Un écran de 1920 pixels peut afficher une fenêtre de navigateur de 1200 pixels, et cette fenêtre est tout ce dont dispose votre mise en page.
Testez à 360 et 390 pixels de large. Beaucoup de téléphones Android annoncent 360 à 412 pixels CSS et les iPhone récents 375 à 440 : une mise en page qui fonctionne à 360 couvre donc la plupart des téléphones.
Fournissez des images deux fois plus grandes que leur taille d'affichage, ou utilisez srcset, pour qu'elles restent nettes sur les écrans dont le pixel ratio est de 2 ou plus.
Le zoom du navigateur modifie à la fois le viewport et le pixel ratio. Si les valeurs semblent étranges, réinitialisez le zoom avec Ctrl+0 ou Cmd+0 et vérifiez à nouveau.
Questions fréquentes
Pourquoi la résolution de mon écran paraît-elle plus petite que celle indiquée par mon moniteur ?
Les navigateurs indiquent les tailles en pixels CSS. Quand votre système d'exploitation met l'affichage à l'échelle, par exemple à 150% sur un moniteur 4K ou sur n'importe quel Mac Retina, un pixel CSS couvre plusieurs pixels physiques. Multipliez la taille de l'écran par le device pixel ratio affiché ici pour obtenir la résolution physique.
Quelle est la différence entre la taille de l'écran et la taille du viewport ?
La taille de l'écran correspond à l'affichage entier. La taille du viewport est la partie de la fenêtre du navigateur qui affiche la page, sans la barre d'adresse, les onglets, les barres d'outils ni les panneaux ancrés. Les sites web se mettent en page selon le viewport : c'est donc la valeur à utiliser pour le responsive design.
Qu'est-ce que le device pixel ratio ?
C'est le nombre de pixels physiques utilisés pour dessiner un pixel CSS dans chaque direction. Un ratio de 1 correspond à un écran standard, 2 est courant sur les ordinateurs portables à écran haute densité et les tablettes, et 3 sur les téléphones. Il change aussi quand vous zoomez sur la page.
Quels breakpoints utiliser pour le responsive design ?
Partez des valeurs par défaut de votre framework, listées sur cette page pour Tailwind et Bootstrap, puis ajoutez un breakpoint partout où votre propre contenu commence à paraître à l'étroit ou étiré. Les breakpoints doivent suivre le contenu, pas des appareils précis.
Des informations sur mon appareil sont-elles enregistrées ?
Non. Les valeurs sont lues dans votre navigateur et affichées sur la page. Elles ne nous sont pas envoyées et ne sont pas enregistrées.
Pixels CSS et pixels physiques
Un pixel CSS est une unité de longueur, pas un point sur l'écran. Sur un téléphone avec un pixel ratio de 3, une boîte de 100 sur 100 pixels CSS est dessinée avec 300 sur 300 pixels physiques. C'est pourquoi un téléphone dont la dalle fait 1179 pixels de large annonce aux sites web une largeur de 393 pixels : le navigateur affiche une page lisible à une taille confortable, et la dessine avec plus de détails.
Pour la mise en page, seuls les pixels CSS comptent. Pour les images, les pixels physiques comptent aussi, car une image exactement aussi large que sa boîte en pixels CSS paraîtra floue sur un écran de ratio 2 ou 3.
Les breakpoints en pratique
Tailwind et Bootstrap sont mobile first : les styles sans préfixe s'appliquent à toutes les largeurs, et chaque breakpoint ajoute des règles à partir de sa largeur minimale. Dans Tailwind, md signifie 768 pixels et plus, pas seulement les tablettes.
Le panneau des breakpoints de cette page mesure le viewport de la même manière que les media queries de ces frameworks : il affiche donc l'ensemble des classes qui seraient actives dans cette fenêtre en ce moment.
Breakpoints min-width par défaut de Tailwind CSS et Bootstrap 5
Framework
Breakpoint
S'applique à partir de
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Tailwind CSS
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Bootstrap 5
Tailles de viewport des appareils courants en pixels CSS (portrait), avec pixel ratio et pixels physiques
Type
Appareil ou réglage
Viewport (px CSS)
Pixel ratio
Pixels physiques
Téléphone
iPhone SE (2e et 3e génération)
Téléphone
iPhone 13 et 14
Téléphone
iPhone 15 et 16
Téléphone
iPhone 16 Pro
Téléphone
iPhone 15 Plus et 16 Plus
Téléphone
iPhone 16 Pro Max
Téléphone
Samsung Galaxy S24
Téléphone
Google Pixel 8
Tablette
iPad mini (6e génération)
Tablette
iPad (10e génération)
Tablette
iPad Pro 11 pouces (4e génération)
Tablette
iPad Pro 12.9 pouces
Portable
Ordinateur portable HD
Portable
Full HD avec mise à l'échelle 125%
Portable
MacBook Air 13 pouces (M2, par défaut)
Bureau
Moniteur Full HD
Bureau
Moniteur QHD
Bureau
Moniteur 4K avec mise à l'échelle 150%
Portrait
Paysage
Copier la media query {name}
Écran {sw}×{sh} (physique {pw}×{ph}), viewport {vw}×{vh}, device pixel ratio {dpr}
Votre écran en ce moment
Résolution de l'écran (px CSS)
Format {ratio}
Résolution physique
Écran × device pixel ratio
Viewport du navigateur
La zone dans laquelle votre page est mise en page
Device pixel ratio
Change avec le zoom du navigateur
Écran disponible
Écran moins la barre des tâches ou le Dock
Orientation et couleur
{orientation}, {depth} bits
Écran tactile détecté
Aucun écran tactile détecté
Copier ces valeurs
Lecture de votre écran. JavaScript est nécessaire.
Dans quel breakpoint vous êtes
Mesuré sur la largeur du viewport{width}. Redimensionnez la fenêtre pour le voir changer.