Anzeige
LifehacksSoftwareWeb

Safari: Responsive Webdesign auf verschiedenen Bildschirmgrößen testen

Wie sieht die Website auf verschiedenen Bildschirmgrößen aus? Safari verrät es Euch!

Wenn Ihr wie wir hier bloggt, anderweitig Web-Projekte durchführt oder sogar Webdesigner seid, solltet Ihr immer auch die Mobilfreundlichkeit Eurer Website im Auge behalten. Heutzutage ist Responsive Design die beste Methode, um eine Website an die Anforderungen verschiedener Bildschirmgrößen vom kleinen Smartphone bis zum 32-Zoll-Desktop anzupassen. Um die Website auf verschiedenen Bildschirmen zu testen, braucht Ihr inzwischen nicht einmal mehr einen Gerätepark: Ein Mac mit dem Safari-Browser reicht völlig aus.

Anzeige

Entwickler-Menü in Safari aktivieren

Apples Safari verfügt inzwischen über einen praktischen Responsive-Modus, in dem sich Websites bequem auf verschiedenen Endgeräten wie dem iPhone oder dem iPad sowie verschieden Bildschirmgrößen anzeigen lassen. So könnt Ihr bequem Euer Webdesign testen, ohne Euren Rechner zu verlassen oder mit virtuellen Maschinen herumzuhantieren. Alles, was Ihr für den Responsive-Modus braucht, ist das Debug-Menü. Das könnt Ihr aktivieren, indem Ihr in den Safari-Einstellungen auf dem Mac im Reiter „Erweitert“ den Haken bei „Menü ‚Entwickler‘ in der Menüleiste anzeigen“ setzt. Anschließend seht Ihr einen Menüleisten-Eintrag namens „Entwickler“.

Mit einem Klick schaltet Ihr die Entwickler-Funktionen frei.

Responsive-Modus in Safari starten

Nun könnt Ihr ganz einfach den Responsive-Modus starten: Wählt ein Browser-Fenster oder -Tab, idealerweise eines, in dem schon Eure Website zu sehen ist. Klickt nun entweder in der Menüzeile auf Entwickler -> In Modus Responsive Design wechseln“ oder drückt die Tastenkombination (Ctrl)+(Command)+(R). In beiden Fällen wird der Responsive-Modus aufgerufen, und zwar nur in diesem Fenster oder Tab. Durch einen erneuten Klick im Menü oder die Wiederholung der Tastenkombination könnt Ihr den Responsive-Modus beenden.

Im Responsive-Mode von Safari habt Ihr eine Vielzahl an Bildschirm-Optionen zur Verfügung.

Website auf verschiedenen Bildschirmgrößen betrachten

Das war es auch schon: Ihr könnt Euch jetzt durch die verfügbaren Bildschirmgrößen wie iPhone SE, iPad Pro oder reguläre Bildschirmauflösungen klicken. Praktisch: Wenn Ihr eine der verfügbaren Optionen doppelt anklickt, wird zwischen Porträt- und Landschaftsmodus, also zwischen Hoch- und Querformat, gewechselt. Bei den iPads könnt Ihr sogar bestimmte Split-View-Optionen durchprobieren. So könnt Ihr Euch Eure Seite auf einer Vielzahl von Geräten anschauen. Ebenfalls praktisch ist die Möglichkeit, verschiedene Pixel-Auflösungsverhältnisse auszuwählen oder verschiedene Browserkennungen – etwa Chrome, Edge und Firefox durchzuführen. Achtung: Hier wird nicht von einem alternativen Browser-Kern gerendert, vielmehr zeigt Safari die Seite an, als hätte sich als Browser zum Beispiel ein Firefox gemeldet.

Anzeige
Mit dem Responsive-Mode könnt Ihr verschiedene Bildschirmauflösungen durchdeklinieren.

Gut für Auflösungs-Check, schlecht für Code

Insgesamt ist der Responsive-Mode von Safari interessant, wenn es darum geht, im Alltag schnell zu prüfen, ob eine Website auf einem bestimmten Endgerät brauchbar gerendert wird. Hier liegt allerdings auch der Pferdefuß: Natürlich zeigt Safari Website-Code nur so an, wie er von Safari gerendert wird. Wer wissen will, wie eine Website unter Firefox auf Linux aussieht oder Edge unter Windows aussieht, muss hier leider entsprechendes Gerät oder eine VM bereithalten. Denn das Rendering des Website-Codes kann Safari leider (noch) nicht emulieren.

7% Ersparnis
(* = Affiliate-Link / Bildquelle: Amazon-Partnerprogramm)
×
Produktpreise und -verfügbarkeit sind zum angegebenen Datum / Uhrzeit korrekt und können sich ändern. Alle Preis- und Verfügbarkeitsinformationen auf https://www.amazon.de/ zum Zeitpunkt des Kaufs gelten für den Kauf dieses Produkts.

Christian Rentrop

Freier Journalist, Baujahr 1979. Erste Gehversuche 1986 am Schneider CPC. 1997 ging es online. Seither als Blogger und Journalist in Totholzwäldern, auf digitalen Highways und mit der Vespa GTS 300 oder meinem Hund in der echten Welt unterwegs. Neuerdings Girldad. Spendier‘ mir einen Kaffee.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Schaltfläche "Zurück zum Anfang"
Do NOT follow this link or you will be banned from the site!