Verständnis: Media Queries effizient einsetzen für Tablets / Smartphones

[truni]

Hallo zusammen,
welche Media Queries setzt ihr ein für eine "rudimentäre" mobile Optimierung?

Es gibt ja bei CN 3.x die Grid Breakpoints bei 980px und 760px, wenn man mit dem Responsive Grid das Browserfenster verkleinert. Soweit so gut. enn ich ein CSS mit "ALL" erstelle, dann mit max-with: 980px resp. 760px je die Anpassungen in einem separatem CSS definiere, sieht im Browser alles cool aus beim Verkleinern des Fensters. Aber eben – auf iPad und iPhone kommt das z.B. total unbrauchbar. Die machen irgend einen Mix in der Darstellung. Da brauchts wohl bessere Queries ...

Was setzt ihr ein, damits sowohl im Browser schön responsive geht (um dem Kunde mal kurz zu "beweisen") und auch sinnvoll (mit möglichst wenig CSS Files) auf mobilen Geräten klappt mit dem Design zusammen schieben?

[truni]

Kann gleich selber den Ansatz mitliefern, der zum Erfolg führt:

Genauer Check (Pixelweise) um den definierten Breakpoint mit http://responsivepx.com – und Welt der Wunder: genau bei @media screen and (max-width: 979px) war das Problem. Der Stand auf 980px und hat die iOS-Devices verwirrt, da sie scheinbar genau hier reagieren und mir dann ein Layout angezeigt haben, dass ich schlicht übersehen habe (da nur 1px Viewport gross)