iPhone Safari автоматически не уменьшает портрет -> пейзаж-> портрет - PullRequest
35 голосов
/ 06 апреля 2010

У меня есть очень простая HTML-страница с этим метатегом для iPhone:

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,user-scalable=no" />

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

Но когда я поворачиваю назад из пейзажа, размер страницы не изменяется, чтобы соответствовать ширине портрета, как это было раньше. Остается в ширине ландшафта.

Я хочу, чтобы iPhone автоматически установил правильную ширину, как в ландшафтном режиме. Я не думаю, что это должно включать слушателей ориентации, потому что все это делается автоматически, и у меня нет специальных стилей для различных режимов.

Почему iPhone не изменяет размер веб-страницы в портретном режиме? Как мне это исправить?

UPDATE

Мне удалось настроить iPhone на автоматическое изменение размера, но с таким странным явлением, как только после четного числа поворотов ... Я использую этот метатег:

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

Вот что мне нужно сделать, чтобы автоматически изменить его размер:
1. На нагрузке в портретном -> хорошо выглядит.
2. Поверните в альбомную ориентацию -> измените размер по размеру экрана.
3. Поверните назад к портрету -> без изменения размера назад.
4. Поверните в альбомную ориентацию -> все еще в размере для альбомной ориентации.
5. Поверните в портретную ориентацию -> измените размер, чтобы соответствовать портретному экрану.

Может кто-нибудь объяснить это поведение ??
Я все еще хочу знать, как это исправить, и ценю любую помощь.

Спасибо!
Том.

Ответы [ 11 ]

0 голосов
/ 07 мая 2012

Используете ли вы XHTML вместо HTML?

Попробуйте, убедитесь, что правильно закрыли свой первый тег meta.

<meta name="viewport" content ="user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...