Почему на Iphone верстка расползается?

Question

[Александр Антонов]

На реальном пятом iphone верстка выглядит так:

А в эмуляции так:


Вообще не понимаю почему так и как это исправить? Кто-нибудь сталкивался с таким?

Comments

[Nikolay Talanov]

Вы после выбора модели телефона в эмуляторе делали рефреш (обычный f5)? Без рефреша не заработотает мета-тег вьюпорта.

Answer 1

[Андрей Гончаров]

Проверь, правильно ли указан метатег вьюпорта. Для респонсива должен быть так:

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

Answer 2

[Александр Антонов]

initial-scale=1 надо было во viewport засунуть - он убивает это увеличение

Answer 3

[Денис Инешин]

min-width поможет вам чтобы ограничить ширину блоков. Но на самом деле, для мелких разрешений вам нужно менять layout c помощью media-queries:
https://developer.mozilla.org/en-US/docs/Web/Guide...
habrahabr.ru/post/119127
mediaqueri.es

+ обратите внимание, что вам нужно ориентироваться не на реальное разрешение экрана, так как на айфонах ретина и вам желательно прочитать вот это классное руководство: habrahabr.ru/post/237931

Comments

[Александр Антонов]

так вопрос в том почему на эмуляции все работает а на реальном устройстве нет, например на андроид устройствах все норм. media queries кончено используются

[Денис Инешин]

undermuz: последнюю ссылку про dpi прочитайте, судя по вашим скриншотам, у вас в этом и проблема.

[Александр Антонов]

Решился вопрос добавлением во вьюпорт initial-scale=1