email
forum

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

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

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

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

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

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

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

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

1
2
3
4
.outlooker__ru {
    min-heigh: 40px;
    max-width: 40%;
}

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

1
2
3
.our__block {
    width: 1200px;
}

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

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

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

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, shrink-to-fit=no">

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

Запись опубликована: 11.04.2017