Сжатие настольного браузера очень узко может дать вам смутное представление о том, как работает адаптивный дизайн, но это не точное представление о реальном устройстве с маленьким экраном. И настоящие устройства с маленьким экраном - это то, для чего мы здесь разрабатываем, а не другие любопытные дизайнеры, давящие на свои браузеры =).
В этом скринкасте мы открываем симулятор iOS (поставляется бесплатно с XCode на Mac) и вносим некоторые изменения в дизайн на основе того, что мы там видим. По моему опыту, симулятор очень точно соответствует тому, что вы видите на реальном устройстве. Я также видел различия - например, использование памяти. Сразу после запуска этого веб-сайта я увидел сбой на мобильном веб-ките, а этого не происходило в симуляторе.
Одна вещь, которую мы делаем, - это удаляем эффект трехмерной стопки бумаги в самом узком медиа-запросе. Мы также выяснили, что реклама в заголовке вызывает некоторую горизонтальную прокрутку на мобильных устройствах, что нежелательно в том, как мы приближаемся к макету для мобильных устройств. К счастью, мы смогли отследить это сразу, но иногда эти вещи неуловимо отследить, и вы просто скрываете их overflow-xна теле, что мы в конечном итоге и делаем здесь.
Мы также настраиваем некоторые размеры шрифта для меньшего экрана.