Создание сайтов для iOS

Современного человека сложно представить без смартфона. Совсем недавно количество мобильного трафика превысило показатели ПК. Одним из требований к созданию современных сайтов является разработка мобильной версии. Как мы уже рассказывали ранее о разработке мобильных сайтов, наибольшее распространение получила методология адаптивной верстки.

Адаптивный сайт для iPhone

Стандартный сниппет для адаптивной верстки долгое время выглядел следующим образом:

Однако, начиная с версии iOS 9 стали поступать жалобы на ошибки в адаптивной верстки для смартфонов и планшетов Apple.

Атрибут shrink-to-fit

Для создания адаптивного сайта, в CSS используются следующие свойства:

Для задания свойства max-width вместо пикселей (px) используются значения, заданные в процентах (%). Однако встречаются ситуации, когда все же необходимо задать значение в пикселях. Зададим блок:

В адаптивной верстке, если не указано свойство overflow-x: hidden, такой блок будет выходить за пределы экрана, и пользователю будет показана горизонтальная полоса прокрутки. Однако, механизм рендеринга Safari в iOS, помещает заданный нами блок в 1200px целиком в окно браузера c шириной 375px . Это приведет к тому, что остальные блоки будут ужаты в размерах по отношению к our__block.

Решение проблемы с версткой сайта для iOS

В ответ на жалобы разработчиков, компания Apple рекомендовала в принудительном порядке использовать значение «shrink-to-fit=no», которое уменьшает размер страницы до размера окна просмотра браузера. Для правильного отображения элементов страницы достаточно изменить стандартный meta viewport на:

Outlooker.ru занимается разработкой и созданием сайтов в Москве и Санкт-Петербурге. Мы работаем с 2009 года и готовы предложить свои услуги в области веб-разработки и консалтинга.