Адаптивная верстка. Просмотр через iOS-устройства


Адаптивная верстка

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

Это наводило на грустные мысли, потому что на поверхности в гугле про этот парадокс не было ни слова. И я решил копать вглубь.

Проверив скриптом ширину экрана браузера в iPhone, получил интересную величину в 980 px. Далее я получил от друга интересную ссылку, который тоже заинтересовавшийся данным багом, также начал своё расследование.

И вот оказывается какая ситуация. Браузер Safari на iOS имеет по умолчанию ширину 980 пикселей. И отказывается хорошо работать с теми страницами которые имеют ширину уже (например 560px) чем, та которая по дефолту.

Норма)

Благо это легко лечится мета-тегом их же собственного производства, который просто добавляется в хэдер:

<meta name="viewport" content="width=device-width" />

В итоге мы видим замечательный эффект изменения размера ширины браузера, на тот который есть в реале:

toosmall

Насчет же стилей которые могут визуально изменять страницу в зависимости от положения устройства (portraite/landscape), можно прочесть здесь