Wenn Sie einen Desktop-Browser sehr eng drücken, können Sie sich vage vorstellen, wie ein responsives Design funktioniert, aber es ist keine genaue Darstellung eines tatsächlichen Geräts mit kleinem Bildschirm. Und für kleine Geräte mit kleinem Bildschirm entwerfen wir hier, nicht für andere neugierige Designer, die ihre Browser herunterdrücken =).
In diesem Screencast öffnen wir den iOS-Simulator (wird kostenlos mit XCode auf einem Mac geliefert) und nehmen einige Design-Optimierungen vor, die auf dem basieren, was wir dort sehen. Nach meiner Erfahrung ist der Simulator sehr genau auf das, was Sie auf dem realen Gerät sehen. Ich habe aber auch Unterschiede gesehen - zum Beispiel die Speichernutzung. Kurz nach dem Start dieser Website stürzte das mobile Webkit ab - und das passierte im Simulator nicht.
Eine Sache, die wir tun, ist, den 3D-Effekt aus gestapeltem Papier bei der engsten Medienabfrage zu entfernen. Wir stellen auch fest, dass die Anzeige in der Kopfzeile auf Mobilgeräten einen horizontalen Bildlauf verursacht, was bei der Annäherung an das mobile Layout unerwünscht ist. Glücklicherweise konnten wir das sofort aufspüren, aber manchmal sind diese Dinge schwer aufzuspüren, und Sie verstecken einfach das overflow-xam Körper, was wir letztendlich hier tun.
Wir passen einige Schriftgrößen auch für den kleineren Bildschirm an.