Drei Wege, eine Website so festzuhalten, wie sie auf einem Handy aussieht: das Handy selbst aufnehmen, ein Handy in den Chrome-DevTools emulieren oder die Seite aus ihrer URL in Handy-Breite rendern.
Aviral LakhanpaulAktualisiert am 3 Min. Lesezeit
Lade die Seite in Handy-Breite, damit die Website ihr echtes mobiles Layout ausliefert, und nimm das auf. Du kannst den Bildschirm eines echten Handys aufnehmen, ein Handy mit der Gerätesymbolleiste der Chrome-DevTools emulieren und das Fenster aufnehmen, oder die URL einem Tool geben, das die Seite in Handy-Breite einliest und direkt ein Video in 9:16 oder 4:5 exportiert. Verkleinere nie eine Desktop-Aufnahme: Das ist eine kleine Desktop-Seite, nicht die mobile Website.
Eine responsive Website entscheidet ihr Layout anhand der Breite des Fensters, in dem sie läuft. In Desktop-Breite bekommst du das Desktop-Layout, egal auf welches Format du das Video hinterher beschneidest. Für den Menü-Button, die gestapelten Spalten und die größeren Tippflächen der mobilen Website muss die Seite selbst in Handy-Breite geladen werden. Alles unten sind verschiedene Wege dorthin.
| Methode | Gut für | Achte auf |
|---|---|---|
| Den Bildschirm des Handys aufnehmen | Echte Touch-Interaktion, echtes Gerät | Statusleiste und Benachrichtigungen im Bild, ein mit dem Finger geschnipptes Scrollen |
| Gerätesymbolleiste der Chrome-DevTools | Seiten auf localhost oder hinter einem Login | Ein kleines Fenster aufnehmen, Scrollen von Hand oder per Skript |
| Die URL in Handy-Breite rendern | Öffentliche Seiten, sauberes gleichmäßiges Scrollen | Erreicht keine privaten Seiten |
iPhone und Android haben beide einen eingebauten Bildschirmrekorder in den Schnelleinstellungen. Er erfasst das echte Gerät, und das ist ehrlich, aber eben auch das Scrollen, und das ist das Problem: Ein Daumen schnippt und lässt auslaufen, und jedes Schnippen sieht anders aus.
Öffne die DevTools, schalte die Gerätesymbolleiste ein (⇧ ⌘ M auf dem Mac, Strg Umschalt M unter Windows) und wähle ein Handy aus der Liste. Die Seite lädt in dieser Breite mit einem Touch-User-Agent neu und liefert ihr mobiles Layout aus. Nimm mit einem Bildschirmrekorder nur diesen Viewport auf und lass ein Skript scrollen; die Anleitung zum automatischen Scrollen hat eins.
Stell den Zoom in der Gerätesymbolleiste vor der Aufnahme auf 100 %, sonst nimmt der Rekorder eine verkleinerte Kopie auf und der Text wird weich.
Füge die Adresse auf der Startseite ein und wähle oben in den Videoeinstellungen Mobil oder Tablet. Die Seite wird auf unseren Servern in dieser Breite geladen, die Website antwortet also mit dem Layout, das sie dort wirklich ausliefert, und die Formate, die zu einem Handy passen, werden verfügbar: 9:16, 4:5 und 1:1.
Ein gerendertes oder aufgenommenes Mobil-Video ist nur der Bildschirm. Um es in einem iPhone oder Pixel zu zeigen, leg das Video in einer Mockup-App oder einer Vorlage deines Schnittprogramms auf ein Gerät. Exportiere in 9:16, damit es den Gerätebildschirm ohne Balken füllt.
Link einfügen und die Vorschau kostenlos ansehen. 51 Gratis-Credits bei der Anmeldung, ohne Kreditkarte, und kein Wasserzeichen auf deinen Exporten.
Lade die Seite mit der Gerätesymbolleiste der Chrome-DevTools in Handy-Breite und nimm diesen Viewport auf. Oder füge die URL in ein Tool ein, das die Seite in Handy-Breite einliest und das Video direkt exportiert.
Weil die Seite in Desktop-Breite geladen und dann beschnitten oder skaliert wurde. Das Layout richtet sich nach der Fensterbreite, also muss die Seite in Handy-Breite geladen werden, um die mobile Website zu zeigen.
9:16, um einen Handybildschirm zu füllen, wie bei Reels, TikTok und Storys. 4:5 für einen Feed-Post. 1:1, wenn es in beidem gezeigt werden könnte.
Automatisiere Website-Aufnahmen mit anpassbarer Bewegung, cleveren Reglern und Exportoptionen für moderne Creator.
