Недавно начал использовать отзывчивую вёрстку и сегодня столкнулся с проблемой что у заказчика на айфоне сломалась верстка (на других устройствах всё отлично).
В обычных браузерах вот такой код:
.header__wrapper {
height: calc(80px + 30 * ((100vw - 360px) / 1160-360px));
}
Позволяет сделать плавную смену высоты от 110 до 70 пикселей (в зависимости от размера экрана), а в мобильном сафари он просто берет максимальное значение в 110 пикселей. В вёрстке таких мест много.
Пока вижу только два способа:
1. Переписать все на адаптивную вёрстку
2. Как то сделать отдельные стили для сафари. Надеюсь есть такой способ.