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.
Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.
Jonas Hellwig
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.
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.
@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.
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?
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.
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.
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.
Unsere Agentur in Berlin unterstützt bei digitalen Projekten mit sehr unterschiedlichem Umfang. Mit Beratung, Gestaltung und Programmierung helfen wir Menschen in verantwortungsbewussten Unternehmen dabei, online zeitgemäß zu kommunizieren.
Von: 
gefällt!
[…] Mobile Websites online testen: Media Query Previewer für iPhone und iPad […]
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.
@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.
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?
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.
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