Helferlein/Viewport-Emulator
Emulatoren für mobile Endgerätebsind sehr mächtige Werkzeuge, deren großer Funktionsumfang nicht immer benötigt wird. Hier wird eine kleine Seite vorgestellt, die es ermöglicht, beliebige Auflösungen zu emulieren. Im Gegensatz zu den eingebauten Entwicklertools wird für die Steuerung sehr wenig Platz benötigt.
Dennoch kann mit dieser Lösung nicht das Verhalten von Mobilgeräten simuliert werden, es geht einzig um die verschiedenen Auflösungen.
Inhaltsverzeichnis
Features
Die zu untersuchende Website wird in einem iframe dargestellt. Dabei ist es möglich
- beliebige Auflösungen einzustellen,
- zwischen Hoch- und Querformat umzuschalten,
- per dropdown beliebige URLs aufzurufen und
- die aktuellen Einstellungen in einem Cookie zu speichern.
Bedienung
Um dieses Tool zu nutzen, schauen Sie sich das Beispiel an und speichern es auf Ihrem PC ("So sieht's aus" -> Rechtsklick -> "speichern unter"). Dort können Sie Ihre gewünschten Anpassungen vornehmen.
Sämtliche Einstellungen werden in dem Skript vorgenommen, welches sich im head des Dokumentes befindet.
Auflösungen
var _resolutions = {
'480x320': 'Mobile',
'800x600': 'Small tablet',
'1024x600': 'Tablet 7″',
'1280x800': 'Tablet 10″',
'1024x768': 'iPad mini',
'2048x1536': 'iPad mini Retina',
'1024x768': 'iPad 2',
'2048x1536': 'iPad Air',
'360x640': 'Galaxy S5',
'360x740': 'Galaxy S8',
'320x658': 'Galaxy S9+',
}
Sie können im (heruntergeladenen) Script nicht benötigte Auflösungen löschen oder auch nach obigem Muster neue hinzufügen.
Seiten
var _pages = {
'Startseite': 'index.html',
'Adminbereich': 'admin/index.php',
}
Sonstiges
Außerdem lassen sich noch default-Werte festlegen, nämlich mit welcher Auflösung und welcher Orientierung welche Seite im IFrame geöffnet wird.
Download
Sie können sich das Beispiel einfach herunterladen, indem Sie das Tool mit Rechtsklick öffnen und dann im Browser speichern.
- Dieses Tool ist nur mit dem Chrome-Browser ausführlich getestet. Mit anderen Browsern könnte es daher Probleme geben.
- Die CSS-Selektoren für die Anpassung der Scrollbar im Chrome stehen bereits im Code, falls jemand diese auf eine mobile Version anpassen möchte.
- Viele Browser haben einen eingebauten Viewportemulator.
- Chrome:
[strg]+[shift]+[i]öffnet die Entwicklertools,[strg]+[shift]+[m] - Firefox:
[strg]+[shift]+[m] - IE:
[F12]öffnet die Entwicklertools, Reiter Emulation - Opera:
[strg]+[shift]+[i]öffnet die Entwicklertools,[strg]+[shift]+[m]
- Chrome: