Как я сбрасываю масштаб/масштабирование веб-приложения на изменении ориентации на iPhone?
Когда я запускаю свое приложение в режиме портрета, оно хорошо работает. Затем я вращаюсь в среду, и она увеличена. Чтобы заставить это масштабироваться правильно для альбомного режима, я должен дважды коснуться чего-то дважды, сначала чтобы масштабировать полностью в (нормальное поведение двойного выстрела) и снова масштабировать полностью (снова, нормальное поведение двойного выстрела). Когда это уменьшает масштаб, это уменьшает масштаб к корректному НОВОМУ масштабу для альбомного режима.
Переключение назад на портрет, кажется, работает более последовательно; то есть, это обрабатывает масштабирование так, чтобы масштаб был корректен, когда ориентация возвращается к портрету.
Я пытаюсь выяснить, является ли это ошибкой? или если это - что-то, что может быть зафиксировано с JavaScript?
С областью просмотра meta содержание, я устанавливаю начальный масштаб на 1,0, и я - минимум установки NOT или максимальный масштаб (и при этом я не хочу к). Я устанавливаю ширину на ширину устройства.
Какие-либо идеи? Я знаю, что много людей было бы благодарно иметь решение, поскольку это, кажется, персистентная проблема.
2 ответа
MobileSafari поддерживает событие смены ориентации в объекте окно . К сожалению, не существует способа напрямую управлять масштабированием с помощью JavaScript. Возможно, вы могли бы динамически записывать / изменять метатег , который управляет окном просмотра, но я сомневаюсь, что это сработает, он влияет только на начальное состояние страницы. Возможно, вы могли бы использовать это событие для фактического изменения размера вашего контента с помощью CSS. Удачи!
У меня была та же проблема, и установка maximum-scale=1.0 помогла мне.
Редактировать: Как упоминалось в комментариях, это отключает пользовательское масштабирование, за исключением случаев, когда содержимое превышает разрешение по ширине. Как уже говорилось, это может быть неразумно. Но в некоторых случаях это может быть желательным.
Код viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;">