Kurz gesagt
- Die responsiven Modi in Safari und Chrome sind der schnellste Weg, ahmen ein Handy aber nur ungefähr nach.
- Der Simulator von Xcode lässt iOS auf deinem Mac laufen und stellt die Seite viel näher an einem echten iPhone dar.
- Die iPhone-Synchronisierung zeigt dein echtes iPhone in einem Fenster auf dem Mac, ab macOS 15, aber laut Apple ist sie in der EU nicht verfügbar.
- QuickTime mit Kabel zeigt den Bildschirm deines echten iPhone live auf dem Mac, während du das Handy mit den Händen bedienst: die realistischste Option.
- Egal, was du wählst: Nimm nur dieses Fenster auf und erklär, was mobil anders ist.
Um die mobile Ansicht einer Website am Mac zu zeigen, hast du vier Optionen: den Responsive-Design-Modus des Browsers, den iPhone-Simulator in Xcode, die iPhone-Synchronisierung oder dein echtes iPhone, per Kabel angeschlossen und über QuickTime angezeigt. Der responsive Modus ist am schnellsten, QuickTime mit Kabel wirkt am echtesten. Entscheide danach, wie nah am echten Handy es für den Kunden sein muss, und nimm dann dieses Fenster auf.
Kunden beurteilen eine Website am Handy. Wenn du ihnen nur die Desktop-Version zeigst, öffnen sie nach dem Video als Erstes den Staging-Link auf ihrem iPhone und schicken dir einen Screenshot. Zeigst du die mobile Version im selben Video, sparst du dir eine Runde.
Die vier Optionen im Überblick
| Option | Sieht aus wie ein echtes iPhone | Echte Touch-Bedienung | In der EU verfügbar | Einrichtung | Gut für |
|---|---|---|---|---|---|
| Responsiver Modus im Browser | ~ ungefähres Layout | ✗ | ✓ | Keine | Schnelle Layout-Checks, frühe Runden |
| Xcode-Simulator | ~ nah dran, iOS-Darstellung | ✗ Zeiger | ✓ | Xcode installieren | Genaue Darstellung ohne Handy |
| iPhone-Synchronisierung | ✓ dein echtes iPhone | ✗ Trackpad | ✗ | Kompatibler Mac und kompatibles iPhone | Echtes Gerät, vom Mac aus gesteuert |
| QuickTime mit Kabel | ✓ dein echtes iPhone | ✓ | ✓ | Ein Kabel | Die realistischste Demo |
Verfügbarkeit der iPhone-Synchronisierung laut Apple Support, geprüft im November 2026.
Option 1: responsiver Modus im Browser
Safari und Chrome können eine Seite im Browser auf Handymaße verkleinern.
Safari
- Schalte die Entwicklerfunktionen ein. Wähle und aktiviere Funktionen für Webentwickler anzeigen. Ein Menü „Entwickler“ erscheint.
- Öffne die Seite, die du zeigen willst.
- Aktiviere den responsiven Modus. Wähle oder drück ⌃⌘R.
- Wähl eine iPhone-Vorgabe aus der Liste der Viewport-Größen oder zieh an den Griffen, um eine eigene Größe festzulegen.
Chrome
- Öffne die DevTools auf der Seite mit ⌘⌥I.
- Klick auf „Toggle device toolbar“ in der Aktionsleiste oben in den DevTools.
- Wähl ein Gerät aus der Liste „Dimensions“.
- Optional: Wähle , wenn es für dieses Gerät einen Rahmen gibt.
Der Haken: Beides sind Annäherungen. Laut Apples Dokumentation geben die Vorgaben Layout, Darstellung und Verhalten auf einem echten Gerät nicht exakt wieder, zum Beispiel wegen der Adressleiste, der Bildschirmtastatur und der Art, wie Handys mit Formularfeldern umgehen. Die Chrome-Dokumentation beschreibt den Gerätemodus als erste, grobe Annäherung. Gut für „So klappt das Menü mobil zusammen“, nicht für „Genau das werden deine Kunden sehen“.
Wenn du den responsiven Modus aufnimmst, nimm nur den Bereich mit dem Handy-Viewport auf, nicht das DevTools-Panel drumherum. Unser Leitfaden, wie du nur ein Fenster oder einen Bereich des Bildschirms aufnimmst, zeigt, wie du einen Bereich auswählst.
Option 2: Xcode-Simulator
Der Simulator gehört zu Xcode, Apples App für Entwickler, und lässt iOS auf deinem Mac laufen. Du öffnest Safari im simulierten iPhone und lädst die Website. Apples Safari-Dokumentation beschreibt Simulatoren als genauen Weg, Seiten für iOS ohne zusätzliche Geräte zu testen, und der Responsive-Design-Modus von Safari kann die aktuelle Seite direkt in einem Simulator öffnen.
- Vorteile: iOS-Darstellung, die Adressleiste von Safari unter iOS, echte Formularelemente und Tastatur.
- Nachteile: Xcode ist eine große Installation, und du bedienst alles mit einem Zeiger statt mit dem Finger. Scrollen mit dem Trackpad sieht weniger natürlich aus als echtes Wischen.
Nimm das Simulator-Fenster für sich allein auf. Der Handyumriss und die abgerundeten Ecken machen dem Kunden sofort klar, was er sieht.
Option 3: iPhone-Synchronisierung
Die iPhone-Synchronisierung zeigt dein echtes iPhone in einem Fenster auf deinem Mac, und du steuerst es mit Trackpad und Tastatur. Laut Apple brauchst du:
- einen Mac mit Apple Silicon oder T2-Sicherheitschip und macOS Sequoia 15 oder neuer;
- ein iPhone mit iOS 18 oder neuer und Code;
- beide angemeldet mit demselben Apple Account mit Zwei-Faktor-Authentifizierung, mit eingeschaltetem Bluetooth und WLAN;
- das iPhone gesperrt und in der Nähe des Mac.
Öffne auf dem Mac die App „iPhone-Synchronisierung“, gib bei Bedarf den Code deines iPhone ein, und der Bildschirm des iPhone erscheint in einem Fenster. Weil es ein Fenster auf deinem Mac ist, kannst du es wie jedes andere Fenster aufnehmen.
Option 4: dein iPhone mit Kabel und QuickTime
Das ist die realistischste Option: Der Kunde sieht den echten iPhone-Bildschirm, mit echtem Scrollen und echten Taps, weil du das Handy mit den Händen bedienst.
- Schließ das iPhone per Kabel an deinen Mac an.
- Öffne den QuickTime Player und wähle .
- Klick auf das Menü zum Auswählen des Aufnahmegeräts neben der Aufnahmetaste und wähl unter „Kamera“ dein iPhone aus.
- Bedien das iPhone ganz normal. Sein Bildschirm erscheint live im QuickTime-Fenster.
Du kannst direkt in QuickTime aufnehmen und eine Filmdatei sichern. Wenn du deine Kamerablase und einen Link zum Verschicken willst, nimm stattdessen das QuickTime-Fenster mit deinem Screen Recorder auf.
Was du nutzen solltest
- Frühe Designrunden oder eine schnelle Frage zu einem Breakpoint: responsiver Modus.
- Ein mobiles Review ohne Handy zur Hand oder ein Bug in Safari unter iOS: Simulator.
- Eine aufpolierte mobile Tour außerhalb der EU: iPhone-Synchronisierung.
- Eine mobile Präsentation, die sich echt anfühlen muss: Kabel und QuickTime.
Bei Bug-Reports zählen die realistischen Optionen am meisten. Ein Layout-Bug in Safari unter iOS taucht im Gerätemodus von Chrome vielleicht gar nicht auf. Wenn dir ein Kunde den Bug schickt, hilft unser Leitfaden, wie du Kunden dazu bringst, Fehler per Video zu melden, damit er dir genau zeigt, was er sieht.
Die Aufnahme für den Kunden
Egal, welche Option du wählst, die Tipps zur Aufnahme sind dieselben:
- Nimm nur das Handy-Fenster auf, nicht deinen ganzen Schreibtisch.
- Scroll langsamer als auf deinem eigenen Handy und halte bei jedem Abschnitt an.
- Sag, was mobil anders ist: „Das Menü klappt in diesen Button zusammen“, „Die Preistabelle wird zu Karten“.
- Zeig Desktop und Mobil im selben Video, wenn der Kunde beides vergleichen muss.
Das allgemeine Browser-Setup, vom sauberen Profil bis zu Cookie-Bannern, steht in Website im Browser aufnehmen, ohne Ablenkungen. Wenn das Video eine Präsentation ist, hat Design dem Kunden präsentieren – ganz ohne Meeting eine Struktur, die funktioniert.
Mehr zum Aufnehmen am Mac allgemein: Bildschirm am Mac aufnehmen. Und wenn du solche Videos jede Woche verschickst, sieh dir an, wie das Versenden von Videos an Kunden mit JustRec funktioniert.
Quellen
- Apple Developer: Responsive Design Mode, Safari developer tools, geprüft im November 2026.
- Apple Support: Verwenden der Werkzeuge im Menü „Entwickler“ in Safari auf dem Mac, geprüft im November 2026.
- Chrome for Developers: Simulate mobile devices with device mode, geprüft im November 2026.
- Google Chrome-Hilfe: Chrome-Tastenkombinationen, geprüft im November 2026.
- Apple Support: iPhone-Synchronisierung: iPhone vom Mac aus verwenden, geprüft im November 2026.
- Apple Support: Film mit dem QuickTime Player auf dem Mac aufnehmen, geprüft im November 2026.
Häufige Fragen
Wie sehe ich die mobile Version einer Website auf meinem Mac?
Aktiviere in Safari unter „Einstellungen“ > „Erweitert“ die Funktionen für Webentwickler und öffne dann im Menü „Entwickler“ den Responsive-Design-Modus. In Chrome öffnest du die DevTools und klickst auf „Toggle device toolbar“. Beide verkleinern die Seite auf Handymaße.
Ist der Responsive-Design-Modus genau?
Er bildet das Layout gut nach, aber nicht exakt. Apple weist darauf hin, dass Adressleiste, Bildschirmtastatur und gerätespezifisches Verhalten von Formularen das Layout auf einem echten Gerät verändern können, und empfiehlt für eine genauere Vorschau einen Simulator.
Kann ich den Bildschirm meines iPhone auf dem Mac aufnehmen?
Ja. Schließ das iPhone per Kabel an, öffne den QuickTime Player, wähle „Ablage“ > „Neue Videoaufnahme“ und wähl im Menü zum Auswählen des Aufnahmegeräts unter „Kamera“ das iPhone aus. Der iPhone-Bildschirm erscheint im QuickTime-Fenster, das du direkt aufnehmen oder mit deinem Screen Recorder aufzeichnen kannst.
Warum kann ich die iPhone-Synchronisierung in Europa nicht nutzen?
Laut Apples Support-Seite ist die iPhone-Synchronisierung in der Europäischen Union derzeit nicht verfügbar. Nutze stattdessen QuickTime mit Kabel oder den Xcode-Simulator.
