Современного человека сложно представить без смартфона. Совсем недавно количество мобильного трафика превысило показатели ПК. Одним из требований к созданию современных сайтов является разработка мобильной версии. Как мы уже рассказывали ранее о разработке мобильных сайтов, наибольшее распространение получила методология адаптивной верстки.
Стандартный сниппет для адаптивной верстки долгое время выглядел следующим образом:
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.
Для создания адаптивного сайта, в 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.
В ответ на жалобы разработчиков, компания 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 года и готовы предложить свои услуги в области веб-разработки и консалтинга.