Дуже вузький браузер для робочого столу може дати вам неясне уявлення про те, як працює адаптивний дизайн, але це не точне зображення справжнього пристрою з маленьким екраном. І справді маленькі екранні пристрої - це те, для чого ми тут розробляємо, а не інші цікаві дизайнери, що стискають свої браузери =).
У цьому скрінкасті ми відкриваємо симулятор iOS (надається безкоштовно з XCode на Mac) і робимо деякі налаштування дизайну на основі того, що ми бачимо там. З мого досвіду, симулятор дуже точний до того, що ви бачите на реальному пристрої. Я бачив і відмінності - наприклад, використання пам'яті. Відразу після запуску цього самого веб-сайту я бачив збій на мобільному веб-комплекті - і цього не сталося в симуляторі.
Одне, що ми робимо, - це вилучити ефект 3D-паперу з накопиченням за найвужчим медіа-запитом. Ми також з’ясували, що оголошення в заголовку спричиняє горизонтальну прокрутку на мобільному пристрої, що є небажаною річчю в тому, як ми підходимо до мобільного макета. На щастя, нам вдалося відстежити це відразу, але іноді ці речі важко відстежити, і ви просто приховуєте overflow-xтіло, що ми в кінцевому рахунку робимо тут.
Ми також регулюємо розмір шрифту для меншого екрану.