Safari Emulator, Browser Testing ohne macOS oder iOS
Für Websiteentwickler, welche Windows nutzen, stellt sich oft die Frage wie die Seite in Safari aussieht. Safari ist immer noch einer der meist benutzten Browser und viele Funktionen sind nicht kompatibel. So kann es dazu kommen, dass ein Kunde plötzlich feststellt, dass etwas falsch angezeigt wird. Um diese Fehler zu beheben oder zu verhindern, empfiehlt es sich die programmierte Website immer kurz in einem Safari Emulator zu testen.
Oft braucht man die Möglichkeit eines Safari Emulators nur in einer kurzen Phase des Projekts. Bei unregelmässigem Gebrauch lohnt es sich daher Testversionen verschiedener Anbieter zu verwenden, da diese meist völlig ausreichen. Muss man sehr regelmässig testen, dann lohnt es sich ein Abonnement bei einem der Anbieter abzuschliessen. Diese Abos sind sehr teuer, eventuell lohnt es sich ein macOS-Gerät gebraucht zu kaufen und gleich dort Safari zu verwenden. Auch die Verwendung einer Virtual-Machine ist möglich, aber technisch anspruchsvoll.
Nicht direkt. Nur sehr alte Versionen von Safari sind für Windows verfügbar. Es besteht die Möglichkeit eine Virtual Machine zu verwenden oder einen iOS oder macOS Emulator zu verwenden.
Völlig kostenlos ist kaum ein Programm. Gute Testversionen mit vielen Möglichkeiten existieren allerdings und bieten eine gute Möglichkeit.
Grundsätzlich gilt, dass mehr Testen auch mehr Resultate mit sich bringt. Um den Zeitaufwand möglichst klein zu halten, empfehle ich die Seite zu testen, bevor man sie dem Kunden zeigt.
Problembeispiel
Bei einem meiner Projekte kam es in der Navbar zu einem Safari-Problem. In allen Browsern wurde die Seite wie folgt angezeigt. Ich habe das Projekt auf einem Windows-System entwickelt und habe so die Safari Nutzbarkeit völlig vergessen.
Auf dem Safari-System, wurde es wie folgt angezeigt:
Das Problem konnte ich bei mir nur simulieren, indem ich einen Safari-Emulator verwendete. Das Problem war dann ziemlich einfach behoben. Ich musste das übergeordnete Element als Flexbox-Element definieren. Nur kam es zu keinem Konflikt mit dem padding.
ul.parent{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}Lambdatest (60min/Monat kostenlos)
Nachdem man sich einen Account bei Lambdatest mit einer beliebigen Mail erstellt hat, hat man ziemlich lange einen Zugriff auf die Features. Für unser Anwendungsbeispiel navigiert man zu „Real Time Testing“. Dort hat man Zugriff auf einige Safari-Versionen am Computer oder auf eine mobile Version von Safari. Für weitere Funktionen wäre ein Abo nötig. Das Meiste ist allerdings bereits mit der eingeschränkten Version testbar. Diese Funktion kann man pro Account im Monat 60 Minuten kostenlos nutzen.
Das Programm ist übersichtlich und sehr zu empfehlen.
Appetize.io (100min/Monat kostenlos)
Die kostenlose Version von Appetize.io kann 100 Minuten pro Monat genutzt werden pro Account mit beliebiger Mail-Adresse. Hierbei kann man zwischen den meisten iOS Handys auswählen und von dort aus Apps öffnen. Bei uns wäre es Safari. Dort kann man die gewünschte Web-Domain eingeben und die Seite von einem iPhone testen. Die Übertragung ist sehr flüssig und die Seite ist sehr übersichtlich gestaltet.
Um den Emulator zu starten geht man zu „Dashboard“ und dann „launch standalone device“. Dort kann man die gewünschten Geräte auswählen.
