Hilfsmittel/Viewport-Emulator

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Emulatoren für mobile Endgeräte, etwa der Ripple-Emulator für Chrome oder auch Operas Mobile-Emulator sind 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 von Firefox und Internetexplorer ab Version 8 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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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',
}
Sie können hier nicht benötigte Auflösungen löschen oder auch nach obigem Muster neue hinzufügen.

Seiten[Bearbeiten]

Beispiel
var _pages = {
  'Startseite': 'index.html',
  'Adminbereich': 'admin/index.php',
}

Sonstiges[Bearbeiten]

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[Bearbeiten]

Beispiel ansehen …
„So sieht's aus“, anschließend Rechtsklick und „Seite speichern unter“

Hinweise[Bearbeiten]

  • 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[Bearbeiten]