kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei Responsive Design-Projekten

Unsere Agentur ist auf responsive Design spezialisiert. Wir realisieren u.a. maßgeschneiderte Websites und führen Schulungen durch. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung einer Website im Responsive Design benötigst, helfen wir gerne weiter.
Responsive Webdesign-Leistungsangebot →

Das könnte dich auch interessieren

7 Kommentare

  1. Malte Blättermann

    Verfasst am 25. Juni 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

  2. Sven Giesen

    Verfasst am 25. Juni 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.

  3. Dieter

    Verfasst am 25. Juni 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?

  4. Frank

    Verfasst am 26. Juni 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.

    • Jonas Hellwig

      Verfasst am 27. Juni 2011 um 6: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.

  5. pixelmirj

    Verfasst am 27. September 2011 um 19:47 Uhr.

    gefällt!

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.