Mobile Geräte machen für viele Websites bereits einen großen Teil der Online-Leserschaft aus, wenn nicht sogar den größten Teil. Daher ist es von entscheidender Bedeutung, sicherzustellen, dass Ihre Website auf einem iPhone oder Tablet richtig aussieht und funktioniert. Es gibt viele Dienste, die eine Vorschau des mobilen Layouts für eine bestimmte URL bieten. Apple hat jedoch das Testen von Websites auf ihre Bereitschaft für mobile Geräte mit Safari 9 in OS X El Capitan erheblich vereinfacht. Mit der neuen Funktion " Responsive Design Mode" können Sie schnell eine Vorschau der Website auf einer Vielzahl von Apple-Geräten sowie die gängigen Bildschirmauflösungen für Mobilgeräte anzeigen. So funktioniert das.
Es ist wichtig zu betonen, dass der Responsive Design-Modus eine neue Funktion ist, die nur in Safari 9 unter OS X El Capitan verfügbar ist. Sie müssen also mindestens diese Versionen des Browsers und des Betriebssystems ausführen, um darauf zugreifen zu können. Wenn Ihr Mac diese Anforderung erfüllt, müssen Sie zuerst den Entwicklermodus von Safari aktivieren. Starten Sie dazu Safari und klicken Sie in der Menüleiste auf Safari . Wählen Sie dann Einstellungen> Erweitert .
Aktivieren Sie auf der Registerkarte "Erweitert" des Safari-Fensters "Einstellungen" das Kontrollkästchen "Entwicklungsmenü in Menüleiste anzeigen". Wie der Name der Option impliziert, wird in der Safari-Menüleiste rechts von "Entwickeln" ein neues Menü angezeigt "Lesezeichen."
Schließen Sie als Nächstes das Fenster Safari-Einstellungen und navigieren Sie zu einer Website, die Sie im Responsive Design-Modus testen möchten. Wenn die Website vollständig in Ihren Browser geladen ist, verwenden Sie die Tastenkombination Befehl-Option-R. Das Browserfenster wird in eine Vorschau einer von mehreren Auflösungen für Mobilgeräte umgewandelt. Sie können auch auf den Responsive Design-Modus zugreifen, indem Sie auf Entwickeln in klicken die Safari-Menüleiste und wählen Sie "Responsive Design Mode" .
Mit dem Safari Responsive Design-Modus können Sie eine Vorschau der Website auf allen Auflösungen von Apple-Mobilgeräten anzeigen, vom 3, 5-Zoll-iPhone 4S bis zum 12, 9-Zoll-iPad Pro. Benutzer haben auch die Möglichkeit, eine 1-fache, 2-fache oder 3-fache „Retina“ -Auflösung auszuwählen und den Browser-Agenten so zu ändern, dass er das Verhalten der gängigsten Browser wie Chrome, Firefox und Edge nachahmt.
Für jedes Gerät und jede Bildschirmgröße können Benutzer auf das Gerätesymbol klicken, um zwischen Hoch- und Querformat zu wechseln. Bei Geräten wie dem iPad Air und dem iPad Pro, die die geteilte Ansicht unterstützen, können Sie durch Klicken zwischen verschiedenen Layouts der geteilten Ansicht wechseln.
Während es im Safari Responsive Design-Modus an einigen Optionen für ähnliche bereits vorhandene Tools mangelt, kann die direkte Integration in Safari für Webdesigner eine enorme Zeitersparnis bedeuten und ein hervorragendes Lern- und Testtool für Websitebesitzer sein, die sicherstellen möchten, dass ihre Besucher mobil sind erzielen unabhängig von der Bildschirmauflösung oder -größe die besten Ergebnisse.
Sobald Sie mit dem Testen fertig sind, können Sie den Responsive Design-Modus verlassen, indem Sie entweder das Browserfenster oder die Registerkarte schließen oder die Tastenkombination Befehl-Option-R erneut drücken.
