Comment enregistrer la version mobile d’un site web

Trois façons de capturer un site tel qu’il apparaît sur un téléphone : enregistrer le téléphone lui-même, émuler un téléphone dans les DevTools de Chrome, ou faire le rendu de la page à la largeur d’un téléphone à partir de son URL.

Aviral LakhanpaulMis à jour le 30 octobre 20263 min de lecture

La réponse courte

Chargez la page à la largeur d’un téléphone pour que le site serve sa vraie mise en page mobile, puis capturez-la. Vous pouvez enregistrer l’écran d’un vrai téléphone, émuler un téléphone avec la barre d’outils des appareils des DevTools de Chrome et enregistrer la fenêtre, ou confier l’URL à un outil qui lit la page à la largeur d’un téléphone et exporte directement une vidéo en 9:16 ou 4:5. Ne réduisez jamais un enregistrement fait sur ordinateur : vous obtiendriez une petite page pour ordinateur, pas le site mobile.

Pourquoi tout se joue sur la largeur

Un site responsive choisit sa mise en page d’après la largeur de la fenêtre qui l’affiche. À la largeur d’un ordinateur, vous obtenez la mise en page pour ordinateur, quel que soit le format auquel vous recadrez la vidéo ensuite. Pour obtenir le bouton de menu, les colonnes empilées et les zones tactiles plus grandes du site mobile, c’est la page elle-même qui doit être chargée à la largeur d’un téléphone. Tout ce qui suit est une façon différente d’y parvenir.

Trois façons de faire

Façons d’enregistrer la version mobile d’un site web
Méthode	Idéale pour	Points de vigilance
Enregistrer l’écran du téléphone	Une vraie interaction tactile, un vrai appareil	Barre d’état et notifications dans le champ, défilement donné du bout du doigt
Barre d’outils des appareils des DevTools de Chrome	Les pages sur localhost ou derrière une connexion	On enregistre une petite fenêtre, et le défilement se fait à la main ou par script
Faire le rendu de l’URL à la largeur d’un téléphone	Les pages publiques, un défilement propre et régulier	N’atteint pas les pages privées

Enregistrer le téléphone lui-même

L’iPhone comme Android ont un enregistreur d’écran intégré dans leurs réglages rapides. Il capture le vrai appareil, ce qui est honnête, et le défilement, ce qui pose problème : un pouce donne une impulsion puis laisse filer, et chaque geste est différent.

Activez le mode Ne pas déranger pour qu’aucune notification ne vienne s’afficher.
Masquez les barres d’outils du navigateur en faisant d’abord défiler un peu la page, ou ajoutez la page à l’écran d’accueil si elle peut s’ouvrir en plein écran.
Recadrez ensuite la barre d’état dans un logiciel de montage si elle gêne.

Émuler un téléphone dans Chrome

Ouvrez les DevTools, activez la barre d’outils des appareils (⇧ ⌘ M sur Mac, Ctrl Shift M sous Windows) et choisissez un téléphone dans la liste. La page se recharge à cette largeur avec un user agent de type tactile, et sert sa mise en page mobile. Enregistrez uniquement cette fenêtre d’affichage avec un enregistreur d’écran et laissez un script faire défiler la page ; le guide du défilement automatique en propose un.

Réglez le zoom de la barre d’outils des appareils sur 100 % avant d’enregistrer, sinon l’enregistreur capture une copie réduite et le texte devient flou.

En faire le rendu à partir de l’URL

Collez l’adresse sur la page d’accueil et choisissez Mobile, ou Tablette, en haut des réglages de la vidéo. La page est chargée à cette largeur sur nos serveurs : le site répond avec la mise en page qu’il sert réellement à cette taille, et les formats adaptés à un téléphone deviennent disponibles : 9:16, 4:5 et 1:1.

Les bandeaux cookies et les boutons de chat, qui occupent bien plus de place sur un écran de téléphone, sont retirés d’abord.
La page est lue en double densité, si bien que le texte reste net dans un export en 1080 × 1920.
Lire la page à la largeur d’une tablette ou d’un téléphone ajoute 3 crédits à l’export. Rien d’autre ne change.

Vous la voulez dans un téléphone ?

Une vidéo mobile rendue ou enregistrée ne montre que l’écran. Pour la montrer dans un iPhone ou un Pixel, posez la vidéo sur un appareil dans une application de mockup ou dans un modèle de logiciel de montage. Exportez en 9:16 pour qu’elle remplisse l’écran de l’appareil sans bandes.

Essayez avec votre propre site

Collez un lien et prévisualisez le défilement gratuitement. 51 crédits offerts à l’inscription, sans carte bancaire, et aucun filigrane sur ce que vous exportez.

Vos questions,
nos réponses

En bref, ce que l’on demande ensuite.

Contact

Comment enregistrer l’affichage mobile d’un site web depuis un ordinateur ?

Utilisez la barre d’outils des appareils des DevTools de Chrome pour charger la page à la largeur d’un téléphone, puis enregistrez cette fenêtre d’affichage. Ou collez l’URL dans un outil qui lit la page à la largeur d’un téléphone et exporte directement la vidéo.

Pourquoi ma vidéo du site mobile ressemble-t-elle à un minuscule site pour ordinateur ?

Parce que la page a été chargée à la largeur d’un ordinateur, puis recadrée ou réduite. La mise en page dépend de la largeur de la fenêtre : pour montrer le site mobile, la page doit être chargée à la largeur d’un téléphone.

Quel format d’image pour une vidéo de site mobile ?

Le 9:16 pour remplir un écran de téléphone, comme dans les Reels, TikTok et les stories. Le 4:5 pour une publication dans le fil. Le 1:1 si elle peut être affichée dans l’un ou l’autre.

Moins de temps à filmer. Plus de temps à créer.

Automatisez vos enregistrements de sites avec un mouvement personnalisable, des réglages intelligents et des options d’export pensées pour les créateurs d’aujourd’hui.

Essayer maintenant