Как исправить отображение сайта на iPhone 6?

Question

[Gedonist]

Верстаю лендинг для сайта, дошел до отображения в мобильном и столкнулся со следующей проблемой: когда я выбираю режим отображения iphone 6 в режиме разработчика на Firefox, Chrome и Опера - всё смотрится нормально. А когда захожу с аппаратного iPhone 6, то контент вытягивается в узкую полоску, а также пропадают некоторые стили. Скриншоты прилагаю.
Страница
Скриншоты в браузерах:


Скрин с телефона:

Answer 1

[profesor08]

Тебе надо определить область видимости контента для браузеров.

<meta name="viewport" content="width=device-width, initial-scale=1">

Тут ты можешь указывать разные настройки на свое усмотрение, например управлять зумом, включать, отключать его, вот еще пример:

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

Comments

[Gedonist]

Код

<meta name="viewport" content="width=device-width, initial-scale=1">

уже есть на сайте, строка 304 в исходниках. Это помогает во многих случаях, но не с iphone 6 в этом примере.
То есть, опять же, по мнению десктопного браузера должно корректно отображаться, но у мобильного Safari другой мнение по этому поводу