email
perm_phone_msg
forum

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

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

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

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

<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 используются следующие свойства:

.outlooker__ru {
    min-heigh: 40px;
    max-width: 40%;
}

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

.our__block {
    width: 1200px;
}

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

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

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

<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

Оставьте контактный телефон и мы свяжемся с Вами

Ваше имя

Телефон