Responsive Web Design

[Tronjer]

Mich würde mal interessieren, für welche mobile Devices ihr eure Stylesheets optimiert.

Als Apple-Anhänger (duck) sage ich mal: iOS ist klar, dazu Samsung Galaxy und Note. Aber wie verhält es sich mit Geräten anderer Hersteller? Bindet ihr für alle gängigen Auflösungen Media Queries ein, gibt es einen gemeinsamen Standard für den Rest, vielleicht ein Framework, das nicht zuviel Performance frisst und wie verhält es sich mit Windows Phones? Ich kenne bisher nur jQuery Mobile, habe damit bisher allerdings noch nicht gearbeitet.

Vereinfacht gesagt suche ich nach einem universalen Lösungsansatz, bei dem nicht etliche Stylesheets eingebunden werden, oder innerhalb einer CSS-Datei redundater Code mit Media-Queries erstellt werden muss.

 

[bodil]

Mein Vorgehen in diesem Punkt (warten bis der Kunde sich beschwert, solange fuddeln, bis es auf dessen Gerät funktioniert) hilft dir sicher nicht weiter, weshalb ich es hier unerwähnt lasse.
Als Apple-Ablehner würde ich die Fragestellung aber gerne erweitern: Wie testet ihr eure Seiten so, dass ihr sicher sein könnt, dass sie auf allen Geräten funktionieren? Liegen bei euch iPads, iPhones aller Generationen und sonstige Smartphones griffbereit in ner großen Kiste? Oder gibt es Simulatoren dafür?
(Hoffe, die Erweiterung der Frage ist ok.)

 

[Tronjer]

Ich teste es auf meinem iPhone und iPad. Aber es gibt auch Online-Simulatoren dafür.

 

[Sentence]

Moin,
ich arbeite in der Regel mit den gleichen Media Queries wie bootstrap es beinhaltet.
Das heißt diese hier:

* large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Die reichen völlig, solange der Kunde nichts anderes benötigt.

Testen tue ich, auch als Apple Ablehner :), auf diversen Android Tabletts und Phones (jeweils 4 hier in der Firma).
Zusätzlich nutze ich Ripple, einen Simulator den es für Chrome als Extension gibt.

MfG

 

[Tronjer]

Danke, das war schon mal hilfreich. Ich werde es gleich ausprobieren. :)

 

[Banana_Jones]

Ich halte mich auch an die "Standard"-media-queries. Man wird nie alle Phones oder Tablets 100% korrekt abfangen können, da wird man verschmerzen müssen, wenn einmal ein paar Pixel rechts nicht ganz ausgenützt werden.
Getestet wird über xCode (mit iOS-Simulator) oder über browserstack