Helferlein/Viewport-Emulator

Aus SELFHTML-Wiki
< Helferlein(Weitergeleitet von Mobiler Display Emulator)
Wechseln zu: Navigation, Suche

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.

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

Beispiel
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

Beispiel
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.

Beispiel ansehen …
Öffnen Sie das Beispiel durch einen Klick auf „Ansehen“, anschließend speichern Sie die Seite in Ihrem Browsermenü mit „Seite speichern unter“
Beachten Sie:
  • 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]

Weblinks