REDGEQUARE-Edge-2-Kanten-Anzeigesimulator
Edgesquare ist ein webbasiertes Online-Simulator für mobile Edge-zu-Edge-Displays mit Notch oder einer anderen Form des Kameraausschnitts. Es kann Ihre Web-App über Iframe laden und können aus einer Reihe von Geräten mit Voreinstellungen für die Statusleiste, Navigationsleiste, Kameraausschnitt (Kerben, Löcher usw.) und einige andere Eigenschaften auswählen. Außerdem können Sie Ihre eigenen Farben für die Statusleiste und die Navigationsleiste festlegen, um einige Design -Optimierungen auszuprobieren.
Schauen Sie sich an, wie Ihre Webanwendung auf modernen Smartphones wirklich aussieht! ;-)
Erste Schritte
- Hosten Sie die Website auf Ihrem Server oder gehen Sie einfach zu: https://byteteilchen.de/eded-2-eds/
- Geben Sie die URL Ihrer Webanwendung ein (oder spielen Sie mit der SEPIA Open Assistant Demo herum, ein weiteres großartiges Open-Source-Projekt ^^)
- Wählen Sie ein Gerät aus dem Selektor aus
- Passen Sie die Farben nach Bedarf an
- Entdecken Sie, wie Ihre Website/App auf einem modernen Handy -Display aussieht
Bekannte Probleme
- Da die Geräte durch ihre Ansichtsfenstergröße definiert sind und nicht ihre physische Größe möglicherweise größer als andere oder identisch ist, wenn sie tatsächlich kleiner sind (oder umgekehrt). Dies repräsentiert jedoch den Speicherplatz, das eine Website oder App auf einem bestimmten Gerät aufweist! Verwenden Sie den Umschalt- und Skalierungsfaktor "Geräteskala", um den ca. Echte Größe eines Geräts.
- Die untergeordnete App (die App über 'App -URL') wird in einem Iframe der übergeordneten Seite ausgeführt und sieht daher möglicherweise nicht genau wie die mobile Version aus. Dies hängt davon ab, wie die untergeordnete App auf den Browser "User-Agent" und den Ansichtsfenster reagiert.
- Wenn Sie eine andere 'Benutzer-Agent'-EG eines mobilen Browsers simulieren müssen, können Sie diese SEPIA Open-Source-Browser-Erweiterung für Chrome: Sepia Framework Tools oder die Entwickler-Tools Ihres Browsers verwenden ;-)
- Die HTML-Meta-Eigenschaft 'Theme-Color' wird ignoriert (in allgemeinen Daten aus dem Iframe wird nicht dem übergeordneten übergeben).
Screenshots
Lizenzen
Dieses Projekt ist unter der MIT Open-Source-Lizenz lizenziert. Es ist in Vanille -JS geschrieben und umfasst nur sehr wenige Abhängigkeiten:
- Pickr - Color Picker, der Kreuzbrowser - MIT -Lizenz arbeitet
- SVG -Injekt - Tool zum Erstellen von stilbaren SVG -Bildern - MIT -Lizenz
- Web -Schriftarten von Google -Material -Symbole - Apache -Lizenzversion 2.0
- Einige SVG -Symbole aus Simple Icons Project - CC0 1.0 Universal Lizenz
