Wer seine Website umfassend testen möchte, sollte das nicht nur auf einem Rechner mit Windows-Betriebssystem tun. Gerade für Apple-Nutzer ist es wichtig zu wissen, ob eine Seite auf verschiedenen iOS-Geräten fehlerfrei läuft. Und genau das geht zum Glück ganz einfach: Mit einem Mac und dem kostenfreien Programm Xcode hat man jedes beliebige iPhone direkt im Simulator parat! In diesem Blogbeitrag zeigen wir Ihnen, wie Sie in wenigen Schritten Ihre Webseite im Safari-Browser auf unterschiedlichen Apple Produkten (z. B. iPhone oder iPad) überprüfen können – inklusive Zugriff auf die Entwicklerwerkzeuge.
Warum iOS-Geräte testen?
Produkte der Marke Apple haben eigene Display-Formate und Betriebssystemversionen. Ein responsives Webdesign garantiert zwar eine flexible Darstellung, doch lassen sich Browser- und Versionsunterschiede nur bedingt voraussagen. Mit dem iOS-Simulator von Xcode können Sie schnell und unkompliziert sicherstellen, dass Ihre Seite auch auf Geräten wie iPhone 13, 15, 16 Pro oder zukünftigen Generationen perfekt funktioniert.
Schritt 1: Vorbereitungen
Safari:Auf Ihrem Mac ist Safari standardmäßig installiert. Sie benötigen ihn sowohl, um später den Web-Inspektor zu nutzen, als auch um direkt auf Ihrem Rechner zu überprüfen, ob die Webseite korrekt rendert.
Xcode:Laden Sie sich Xcode aus dem Mac App Store herunter. Die Installation kann – je nach Internetverbindung – etwas Zeit beanspruchen. Nach der Installation ist Ihr Mac bereit, um verschiedene iOS-Geräte zu simulieren.
Schritt 2: Neues Projekt in Xcode erstellen
1. Xcode öffnen: Starten Sie Xcode und wählen Sie in der Startansicht die Option “Create a new Xcode project”.
2. Projekttyp auswählen: Wählen Sie unter iOS den Typ App und klicken Sie auf “Next”.
3. Projekteinstellungen:Geben Sie beliebige Werte für Produktname, Organisation etc. ein – diese Informationen sind für unser Vorhaben unerheblich.
4. Interface bestimmen:Ob SwiftUI oder Storyboard spielt ebenfalls keine Rolle. Wählen Sie einfach eine Option aus, beides funktioniert gleich gut, um den Simulator aufzurufen.
5. Projekt speichern:Sichern Sie das Projekt an einem Ort Ihrer Wahl, damit Sie es bei Bedarf schnell wieder öffnen können, und klicken sie daraufhin auf „Create“.
Schritt 3: Das gewünschte Simulator-Gerät auswählen
In der oberen Menüleiste von Xcode finden Sie rechts neben dem Start-/Stop-Button ein Dropdown-Menü, in dem zunächst „My Mac“ ausgewählt ist.
1. Gerät umstellen:Klicken Sie auf dieses Menü und wählen Sie ein gewünschte iPhone aus der Liste (z. B. iPhone 13, 15, 16 Pro, etc.).
2. Zusätzliche Simulatoren:Ist Ihr gewünschtes Modell nicht vorhanden, klicken Sie auf “Add Additional Simulators…” und laden Sie weitere Geräte herunter.
3. Simulator starten:Drücken Sie CMD + R, um das Projekt auszuführen. Dabei öffnet sich der iOS-Simulator automatisch mit dem von Ihnen gewählten Gerät.
Schritt 4: Safari im Simulator nutzen
Sobald sich der iOS-Simulator öffnet, sehen Sie den Startbildschirm des gewählten iPhones. Hier finden Sie auch die Safari-App.
1. Safari öffnen:Tippen (bzw. klicken) Sie auf Safari im Simulator.
2. Webseite aufrufen: Geben Sie die URL Ihrer Website ein und beobachten Sie, wie sie auf dem iPhone dargestellt wird.
Schritt 5: Entwicklerwerkzeuge in Safari auf Ihrem Mac aktivieren
Um den Web-Inspektor für Debugging- und Analysezwecke zu nutzen, müssen Sie die Entwicklerfunktionen in Safari am Mac aktivieren.
1. Safari-Einstellungen öffnen: Gehen Sie in Ihrem Mac-Safari in der oberen Leiste zu Safari > Einstellungen > Erweitert.
2. Webentwickler-Menü aktivieren: Setzen Sie einen Haken bei „Funktion für Web-Entwickler anzeigen“. Daraufhin erscheint in der Menüleiste von Safari der neue Menüpunkt Entwickler.
Schritt 6: Webseite untersuchen
Jetzt können Sie direkt auf die Webseite im Simulator zugreifen und detaillierte Informationen auslesen:
1. Entwickler-Menü nutzen:Gehen Sie zurück in Safari auf Ihrem Mac unter Entwickler > [Simulator-Name]. Dort sollte Ihr derzeit geöffneter Simulator mit dem aktiven Gerät (z. B. iPhone 14) angezeigt werden.
2. Webseite auswählen:Klicken Sie auf die geöffnete Webseite im Simulator. Der Web-Inspektor öffnet sich und zeigt Ihnen HTML-, CSS- und JavaScript-Daten der Seite – ideal, um Layout- und Code-Details zu prüfen oder zu debuggen.
Fazit:
Mit wenig Aufwand können Sie dank Mac und Xcode eine Reihe an iOS-Geräten simulieren und Ihre Webseiten in Safari ausführlich testen. Ob Responsive Design, Performance-Optimierung oder Debugging: Der iOS-Simulator in Kombination mit Safaris Entwicklerwerkzeugen ist ein unschlagbares Duo für Webprojekte. So stellen Sie sicher, dass Ihre Besucher – egal ob auf iPhone 13, iPhone 16 Pro oder älteren Modellen – immer eine optimale User Experience genießen.
Unsere Internetagentur München, Econcess, legt einen großen Wert auf ein aufgewecktes Design, um viele Kunden anzusprechen. Wenn Sie nun Interesse an einer Webseite für Ihre Firma haben, melden Sie sich gerne bei uns. Wir sind spezialisiert auf maßgeschneiderte Lösungen und bieten Ihnen professionelle Unterstützung bei der Realisierung Ihrer digitalen Projekte.