Надеюсь, я не нарушаю NDA здесь, но здесь идет.
Mobile Safari по умолчанию отображает страницу, как если бы эта страница была просмотрена браузером настольного компьютера, с шириной по умолчанию 980 пикселей.
Чтобы изменить это поведение, вам нужно явно объявить область просмотра, что вы делаете через метатеги. Если вы объявите ширину константой device-width , по умолчанию она будет равна 320 вместо 980, и все выглядит отлично.
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>