iPhone Mockup

Inhalt

Live: Ein echtes Chrome auf dem Server zeigt die Seite als iPhone. Im iPhone tippen = klicken, ziehen oder Mausrad = scrollen. Nach einem Klick ins iPhone kannst du schreiben.

Seite: Nimmt die komplette Seite als iPhone auf. Den Ausschnitt wählst du danach per Scrollen.

iframe: Die Seite läuft direkt in deinem Browser – ideal für eigene Websites. Viele fremde Seiten erlauben kein Einbetten. Bild per Tab-Aufnahme beim Export oder ⛶ Präsentation + eigener Screenshot.

Bild: Eigenen Screenshot einsetzen – aus den Chrome DevTools oder direkt vom iPhone. Bilder kannst du jederzeit auch einfach aufs iPhone ziehen oder mit ⌘V einfügen.

Die Seite verhält sich wie am iPhone: kein Hover, keine Mausbewegungen, Touch-Erkennung. Von außen lässt der Browser das nicht zu – bei eigenen Websites dieses Script möglichst weit oben im <head> einbinden. Es ist nur hier im Mockup aktiv.

DevTools-Größe × @

  1. DevTools öffnen (⌥⌘I), Gerätesymbolleiste einschalten (⇧⌘M).
  2. „Dimensions: Responsive“ wählen, Breite × Höhe eintragen (Klick auf die Zahl kopiert).
  3. ⋮-Menü → „Add device pixel ratio“ → 3. Optional „Add device type“ → Mobile.
  4. ⋮ → „Capture screenshot“ oder „Capture full size screenshot“.
  5. Bild aufs iPhone ziehen.

Automatisch: Bilder im Display-Format (echte iPhone-Screenshots inkl. Uhrzeit) füllen das ganze Display – dann wird keine eigene Status- oder Safari-Leiste darübergelegt. Alles andere (z. B. DevTools) landet unter der Statusleiste.

Aufnahme-Optionen
iPhone
Farbe

Im iframe-Modus kann die Farbe nicht von der Seite gelesen werden. Sie gilt auch für den Bereich hinter der Safari-Leiste.

Aus: Die Seite läuft hinter der Leiste weiter, fixierte Elemente unten können verdeckt werden.

An: Die Website endet über der Leiste – bottom: 0 und 100svh sitzen wie am echten iPhone. Unten ist dafür weniger von der Seite zu sehen.

Position Neben dem iPhone ziehen (oder Werkzeug ✥) verschiebt es. ⌘/Strg + Mausrad oder Pinch skaliert, Alt + Mausrad dreht.
X / Y %
Hintergrund
Export Jeder Export landet mit allen Einstellungen im Verlauf (★ oben rechts). Im iframe-Modus fragt der Browser, was geteilt werden soll – „Dieser Tab“ wählen. Alternativ ⛶ Präsentation und selbst einen Screenshot machen.
B × H