Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Media Queries und Responsive Web Design sind die aktuellen Buzzwords der Webdesign-Szene. Gemeint ist damit eine Website, die mithilfe der CSS-Technik „Media Query“ für unterschiedliche Ausgabemedien und Displaygrößen optimiert wurde. Da die mobile Web-Nutzung rasant zunimmt, muss eine zeitgemäße Website auch auf Smartphones und Tablet-PCs eine gute Figur machen.
Wie ihr eine Website für iPhone, iPad & Co. optimiert, habe ich in einem früheren Artikel bereits beschrieben. Nun möchte ich euch ein Online-Tool vorstellen, mit dem sich die Darstellung auf iPhone und iPad simulieren lässt.

iOS Media Query Previewer

Der iOS Media Query Previewer simuliert die Darstellung einer Website auf dem iPad und dem iPhone. Einfach die gewünschte URL eingeben, Enter drücken und schon könnt ihr sehen ob eure Website auf iPhone und iPad auch wie gewünscht angezeigt wird.

ios-media-query-tester

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. pixelmirj
    schrieb am 27.09.2011 um 19:47 Uhr:

    gefällt!

    Antworten
  2. Nutzeroberflächen fürs iPad – jQuery UI Slider « Blog « Advitum Webdesign
    schrieb am 12.09.2011 um 10:06 Uhr:

    […] Mobile Websites online testen: Media Query Previewer für iPhone und iPad […]

    Antworten
  3. Frank
    schrieb am 26.06.2011 um 12:21 Uhr:

    Dies ist kein Emulator, dies testet den Viewport auf die Optimerung via Media Queries; hat also mit iPhone und iPad im wirklichen Sinne nicht viel gemein. Dazu muss mehr bedacht werden. Diese Form des Testens ist rein für Media Queries, die auf die entsprechenden Pixelweiten angebrachten Anpassungen.
    Siehe im übrigen auch mein Tester und Viewport-Debugger.

    Antworten
    • Jonas Hellwig
      schrieb am 27.06.2011 um 06:53 Uhr:

      @Frank: Danke für deine Links! Ich wollte zu deinen super Tools eh noch etwas schreiben. Den iOS Previewer-Artikel hatte ich vor ein paar Wochen geschrieben und erst jetzt veröffentlicht. Das hat sich wohl überschnitten.

      Antworten
  4. Dieter
    schrieb am 25.06.2011 um 17:07 Uhr:

    Funktioniert bei mir nicht. Wenn ich zum Beispiel: initial-scale=0.7 setze, müsste eine Seite doch entsprechend runterskaliert werden. Ich sehe aber die 1:1 Darstellung, oder funktioniert das mit dem Tool noch nicht?

    Antworten
  5. Sven Giesen
    schrieb am 25.06.2011 um 16:14 Uhr:

    Zum schnellen testen des Viewports auf einen Blick ist es super und hilfreich.

    Aber vielleicht sollte man noch den Hinweis anbringen das es keine Mobile Safari Preview ist und sich wirklich nur auf die Auflösungsanweisungen für Media Queries bezieht.

    Denn allein schon durch die unterschiedliche Skalierung der Seite zum echten Mobile Safari wird es u.U. waghalsig für jemanden der sich blind drauf verlässt und im Worst Case erst am Ende auf der richtigen Hardware checkt.

    Antworten
  6. Malte Blättermann
    schrieb am 25.06.2011 um 13:50 Uhr:

    Hallo,

    ist ein nettes Tool, danke für den Hinweis. Allerdings ist mir aufgefallen, das die Site im Ipad-Frame ein kleines Overflow-Problem hat.

    Evtl. wird das vom Autor ja noch behoben, dann ist es perfekt!

    Gruß Malte

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →