Comprimere un browser desktop molto stretto può darti una vaga sensazione di come funziona un design reattivo, ma non è una rappresentazione accurata di un vero dispositivo con piccolo schermo. E i veri dispositivi a schermo piccolo sono ciò per cui stiamo progettando qui, non altri designer curiosi che schiacciano i loro browser =).
In questo screencast apriamo il simulatore iOS (viene fornito gratuitamente con XCode su un Mac) e apportiamo alcune modifiche al design in base a ciò che stiamo vedendo lì. Nella mia esperienza il simulatore è molto preciso per ciò che vedi sul dispositivo reale. Tuttavia ho notato anche delle differenze, ad esempio l'utilizzo della memoria. Subito dopo il lancio di questo stesso sito Web, ho notato un arresto anomalo sul webkit mobile e ciò non stava accadendo nel simulatore.
Una cosa che facciamo è rimuovere l'effetto carta impilata 3D alla query multimediale più stretta. Abbiamo anche scoperto che l'annuncio nell'intestazione causa uno scorrimento orizzontale sui dispositivi mobili, una cosa indesiderabile nel modo in cui ci avviciniamo al layout per dispositivi mobili. Fortunatamente siamo stati in grado di rintracciarlo subito, ma a volte queste cose sono sfuggenti da rintracciare e tu nascondi semplicemente il overflow-xsul corpo, cosa che alla fine facciamo qui.
Regoliamo anche alcune dimensioni dei caratteri per lo schermo più piccolo.