Когда я запускаю свое приложение в портретном режиме, оно работает нормально. Затем я поворачиваю к пейзажу и увеличиваю масштаб. Чтобы правильно масштабировать его для ландшафтного режима, мне нужно дважды нажать что-то дважды, сначала, чтобы полностью увеличить масштаб (нормальное поведение двойного касания) и снова, чтобы полностью уменьшить масштаб (опять же, нормальное поведение двойного касания) . Когда он уменьшается, он возвращается в правильный НОВЫЙ масштаб для ландшафтного режима.
Возвращение к портретной ориентации работает более стабильно; то есть он обрабатывает масштабирование так, чтобы масштаб был правильным, когда ориентация снова меняется на портретную.
Я пытаюсь понять, ошибка ли это? или это можно исправить с помощью JavaScript?
С мета-контентом области просмотра я устанавливаю начальный масштаб на 1.0, и я НЕ устанавливаю минимальный или максимальный масштаб (и я не хочу этого). Я устанавливаю ширину устройства.
Любые идеи? Я знаю, что многие люди были бы благодарны за решение, потому что это постоянная проблема.
источник
Ответы:
У Джереми Кейта ( @adactio ) есть хорошее решение для этого в своем блоге Ориентация и масштаб
Сохраняйте масштабируемость разметки, не устанавливая в разметке максимальный масштаб.
Затем отключите масштабируемость с помощью javascript при загрузке до запуска жестов, когда вы снова разрешите масштабируемость с помощью этого сценария:
Обновление 22-12-2014:
на iPad 1 это не работает, это не работает в слушателе событий. Я обнаружил, что удаление
.body
исправлений, которые:источник
maximum-scale=1.0
действует после начала жеста. Есть ли способ исправить это?Скотт Джель придумал фантастическое решение, в котором акселерометр используется для прогнозирования изменений ориентации. Это решение очень отзывчивое и не мешает жестам масштабирования.
https://github.com/scottjehl/iOS-Orientationchange-Fix
Минифицированный источник:
источник
У меня была такая же проблема, и установка максимального масштаба = 1.0 сработала для меня.
Изменить: как упоминалось в комментариях, это отключает масштабирование пользователя, за исключением случаев, когда контент превышает разрешение по ширине. Как уже упоминалось, это может быть неразумно. В некоторых случаях это также может быть желательно.
Код области просмотра:
источник
Если у вас установлена ширина в области просмотра:
А затем измените ориентацию, он иногда будет случайным образом увеличиваться (особенно если вы перетаскиваете экран), чтобы исправить это, не устанавливайте ширину здесь, которую я использовал:
Это исправляет масштабирование, что бы ни происходило, тогда вы можете использовать либо событие window.onorientationchange, либо, если вы хотите, чтобы оно было независимым от платформы (удобно для тестирования), метод window.innerWidth .
источник
MobileSafari поддерживает
orientationchange
событие наwindow
объекте. К сожалению, не существует способа напрямую управлять масштабированием через JavaScript. Возможно, вы могли бы динамически записывать / изменятьmeta
тег, который управляет окном просмотра, но я сомневаюсь, что это сработает, он влияет только на начальное состояние страницы. Возможно, вы могли бы использовать это событие для фактического изменения размера вашего контента с помощью CSS. Удачи!источник
Я создал рабочую демонстрацию ландшафтного / портретного макета, но масштабирование должно быть отключено, чтобы оно работало без JavaScript:
http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
источник
Я использовал эту функцию в своем проекте.
так что просто addEventListener:
источник
Я нашел новый обходной путь, отличный от любого другого, что я видел, путем отключения встроенного масштабирования iOS и реализации функции масштабирования в JavaScript.
Отличный фон по различным другим решениям проблемы масштабирования / ориентации принадлежит Сержио Лопесу: исправление известной ошибки масштабирования iOS при изменении ориентации на портретную .
Его можно улучшить, но для моих нужд он позволяет избежать основных недостатков, присущих всем другим решениям, которые я видел. Пока я тестировал его только с помощью мобильного Safari на iPad 2 с iOS4.
Focus () / blur () - это обходной путь для предотвращения случайной блокировки функции масштабирования, которая может произойти после изменения ориентации и масштабирования несколько раз.
Установка document.body.style вызывает перерисовку в полноэкранном режиме, что позволяет избежать случайных периодических проблем, когда перерисовка не выполняется после масштабирования.
источник
Элизабет, вы можете динамически изменять содержимое области просмотра, добавляя свойство id в метатег:
Тогда вы просто можете позвонить по javascript:
источник
Вот еще один способ, который, кажется, работает хорошо.
Установите метатег, чтобы ограничить область просмотра до scale = 1, что предотвращает масштабирование:
<meta name = "viewport" content = "width = ширина устройства, начальный масштаб = 1, минимальный масштаб = 1, максимальный масштаб = 1">
С помощью javascript измените метатег на 1/2 секунды позже, чтобы разрешить масштабирование:
setTimeout (function () {document.querySelector ("meta [name = viewport]"). setAttribute ('content', 'width = device-width, initial-scale = 1');}, 500);
Снова с помощью javascript, при изменении ориентации перезагрузите страницу:
window.onorientationchange = функция () {window.location.reload ();};
Каждый раз, когда вы меняете ориентацию устройства, страница перезагружается, сначала без увеличения. Но спустя 1/2 секунды возможность масштабирования восстанавливается.
источник
Нашел очень легко реализуемое исправление. Установите фокус на текстовый элемент с размером шрифта 50 пикселей по завершении формы. Кажется, что это не работает, если текстовый элемент скрыт, но скрыть этот элемент легко, установив свойства цвета элемента, чтобы не было непрозрачности.
источник