WAVESPEED AI TESTEUR RESPONSIVE Votre code reste sur votre appareil

100% GRATUIT

Testeur de design responsive gratuitVoyez votre page à toutes les tailles d’écran en même temps.

Saisissez l’adresse d’un site web ou collez votre HTML et affichez-le dans des cadres à la taille de vrais écrans de téléphone, tablette, portable et ordinateur, côte à côte ou un par un.
Faites glisser un cadre à n’importe quelle largeur, faites-le pivoter, passez d’un breakpoint courant à l’autre, repérez le contenu qui déborde sur le côté et enregistrez des captures de votre HTML.

Plus de 40 tailles d’écranVue côte à côteDétection des débordements

Sans inscription Sans proxy Sans filigrane

Chargement du testeur…

Le HTML collé reste dans votre navigateur. Les sites web se chargent directement depuis leurs propres serveurs.

TROIS ÉTAPES SIMPLES

Comment tester un design responsive

Ajoutez votre page

Saisissez l’adresse d’un site web, ou passez en HTML et collez votre code ou ouvrez un fichier .html. La page d’exemple montre le fonctionnement.

Choisissez les écrans

Regardez un seul appareil et faites glisser ses bords, ou placez un téléphone, une tablette, un portable et un ordinateur côte à côte. Faites pivoter celui de votre choix.

Corrigez et capturez

Lisez les alertes sur le contenu plus large que l’écran, modifiez votre HTML et regardez chaque cadre se mettre à jour, puis enregistrez des captures.

Conseils pour des mises en page qui tiennent à toutes les tailles

Commencez à 320 pixels

Les téléphones les plus étroits en circulation font 320 à 360 pixels CSS de large. Si la mise en page tient à cette largeur, elle tient presque partout.

Faites glisser, ne vous contentez pas des appareils

Les mises en page cassent aussi entre deux appareils. Faites glisser lentement le cadre de l’étroit au large et guettez le moment où quelque chose saute ou se chevauche.

N’oubliez jamais la balise viewport

Sans <meta name="viewport" content="width=device-width, initial-scale=1">, les téléphones affichent la page sur environ 980 pixels de large puis la réduisent jusqu’à rendre le texte minuscule.

WaveSpeed AI

De la mise en page aux visuels

Quand la page fonctionne à toutes les tailles, créez les images et les clips dont elle a besoin avec WaveSpeed AI.

Commencer à créer Explorez plus de 1 000 modèles IA

Plus de 1 000 modèles IA
Image, vidéo et 3D
Paiement à l'usage

$1 de crédits gratuits pour les nouveaux comptes éligibles. Sans carte bancaire. Les générateurs ont leurs propres exigences de compte et de crédits. Ici, Testeur responsive est gratuit.

FAQ du testeur responsive

Ce testeur de design responsive est-il gratuit ?

Oui. Sans compte, sans limite d’appareils ni de pages, sans filigrane sur les captures et sans rien à installer : il tourne dans votre navigateur.

Comment tester mon site web sur différentes tailles d’écran ?

Saisissez l’adresse de votre site ou collez votre HTML, puis choisissez parmi plus de 40 tailles de téléphones, tablettes, portables et ordinateurs, un par un ou côte à côte. Faites glisser un cadre à n’importe quelle largeur, faites-le pivoter ou passez directement aux breakpoints courants.

Les tailles d’appareils sont-elles précises ?

Chaque cadre est un viewport de navigateur ayant exactement la largeur et la hauteur de cet écran en pixels CSS : vos media queries, mises en page et breakpoints réagissent comme sur l’appareil.

Puis-je tester mon propre HTML ou un site local ?

Oui. Collez votre HTML ou ouvrez un fichier .html pour le prévisualiser à toutes les tailles et le modifier en direct. Les sites web se chargent en https ; pour un serveur de développement local, utilisez un tunnel https ou collez le HTML généré.

Détecte-t-il les problèmes de mise en page ?

Oui. Dans votre HTML, il signale les éléments plus larges que l’écran, cause habituelle du défilement horizontal sur téléphone, et vous avertit quand la balise meta viewport manque.

Puis-je enregistrer des captures d’écran ?

Oui, pour le HTML collé : enregistrez la zone visible ou la page entière en PNG au ratio de pixels de l’appareil ; un cadre de 393 pixels de large à 3x donne ainsi une image de 1179 pixels de large.

Que signifie l’indication de ratio de pixels ?

Les téléphones regroupent deux à quatre pixels physiques dans chaque pixel CSS. L’indication affiche ce ratio, et les captures du HTML collé sont enregistrées à ce ratio pour avoir la netteté de l’écran réel.

Ma page passe-t-elle par vos serveurs ?

Non. Un site web est chargé directement depuis son propre serveur par votre navigateur, dans les cadres, sans proxy intermédiaire. Le HTML collé et les captures restent dans votre navigateur ; votre dernière page et vos réglages sont conservés dans le stockage de ce navigateur.

Pourquoi un site web reste-t-il vide ?

Certains sites refusent d’être affichés dans d’autres pages. Ouvrez « Pourquoi est-ce vide ? » pour vérifier les en-têtes du site, ou collez plutôt le HTML de la page.

Tous les outils gratuits