Simulateur de Résolution d'Écran Gratuit
Ce simulateur de résolution gratuit affiche votre taille d'écran et la taille de votre fenêtre de navigateur, et prévisualise toute page web à la largeur d'un téléphone, d'une tablette, d'un ordinateur portable ou d'un bureau. Choisissez un appareil ou tapez une largeur, collez une adresse de page et la page se charge dans un cadre à cette taille. Un tableau des tailles d'appareils courants fonctionne même sans JavaScript.
Screen Resolution Simulator
Domain and Server
À propos de cet outil
Une page qui s'affiche correctement sur votre ordinateur portable peut se casser sur un petit téléphone, et le seul moyen honnête de le savoir est de la regarder à cette largeur. Cet outil charge votre page dans un cadre à la largeur que vous choisissez, afin que vous puissiez vérifier les menus, les images et les boutons à 360, 390, 768 ou 1366 pixels sans posséder chaque appareil. Il signale également votre propre taille d'écran et de fenêtre, que les équipes d'assistance demandent souvent.
Les chiffres sont des pixels CSS, les unités qu'une mise en page web utilise, et non les pixels physiques d'un écran. Un téléphone avec un affichage très net signale toujours une fenêtre d'affichage d'environ 360 à 430 pixels CSS de large, ce qui est ce que votre conception doit adapter. Le tableau énumère les tailles typiques pour les classes d'appareils populaires. Les appareils réels diffèrent, et les barres d'outils du navigateur prennent une certaine hauteur, donc traitez les tailles comme un guide approximatif plutôt qu'une mesure exacte.
De nombreux sites web interdisent d'être affichés à l'intérieur d'une autre page, pour protéger les visiteurs des pièges de clic. Lorsqu'un site envoie cette instruction, cet outil la détecte, n'affiche aucun aperçu et le dit, plutôt que d'afficher une boîte vide. Votre propre site peut être encadré s'il n'envoie pas X-Frame-Options ou une règle frame-ancestors. Un aperçu encadré n'exécute pas non plus les requêtes multimédias sur l'appareil lui-même, donc confirmez les mises en page importantes sur un vrai téléphone avant de lancer.
Questions fréquentes
Pourquoi l'aperçu dit-il que la page ne peut pas être encadrée?
De nombreux sites, y compris les banques, les réseaux sociaux et les grandes boutiques, envoient un en-tête qui interdit d'afficher la page à l'intérieur d'une autre page, comme protection contre le détournement de clic. Le navigateur afficherait une boîte vide, donc l'outil vous le dit à la place. Testez ces sites dans les outils de développement de votre navigateur en mode appareil.
Quelle est la différence entre la taille de l'écran et la taille de la fenêtre d'affichage?
La taille de l'écran est l'affichage complet de votre appareil. La fenêtre d'affichage est la partie de la fenêtre du navigateur qui affiche la page web, qui est plus petite en raison des barres d'outils et des barres de défilement. Les mises en page réagissent à la fenêtre d'affichage, donc c'est le chiffre qui compte pour la conception réactive.
Les tailles d'appareils sont-elles exactes?
Ce sont des tailles de pixels CSS typiques pour les classes d'appareils courants. Les téléphones et les tablettes varient selon le modèle et le logiciel, et les barres du navigateur changent la hauteur. Elles sont suffisamment précises pour détecter les problèmes de mise en page, mais testez toujours les pages importantes sur un vrai appareil avant le lancement.
Cela teste-t-il mon site sur un vrai téléphone?
Non. Il rétrécit le cadre à une largeur de téléphone, afin que la page applique ses règles de mise en page mobile, mais il s'exécute toujours dans votre navigateur actuel. Le comportement tactile, les polices, les barres du navigateur et les performances peuvent différer sur un vrai téléphone. Utilisez-le comme une vérification rapide initiale, pas le test final.
L'adresse que j'entre est-elle stockée?
Non. Notre serveur demande la page une fois pour lire ses en-têtes d'encadrement, puis l'oublie. L'aperçu lui-même se charge directement du site web dans votre navigateur. Nous ne sauvegardons pas l'adresse, le contenu de la page ou votre taille d'écran.