Как вы получаете масштаб окна просмотра после масштабирования в веб-приложении для iPhone?

Кто-нибудь знает, как получить размер в пикселях или значение масштаба области просмотра после того, как пользователь зажал или дважды коснулся, чтобы увеличить/уменьшить масштаб страницы в JavaScript?

Я пытался использовать window.innerWidth, но у меня были смешанные результаты. Иногда кажется, что он точно указывает количество пикселей, отображаемых в окне просмотра, однако, если я увеличу масштаб страницы, а затем сделаю большой щепотку, чтобы уменьшить масштаб, window.innerWidth будет около 600-700, хотя это всего лишь показывает ~ 200 пикселей страницы. Страница имеет ширину всего 400 пикселей, и на ней не отображается клетчатый фон «вы зашли слишком далеко», который вы видите, когда вы уменьшаете масштаб страницы.

Если я делаю небольшие щипки для увеличения и уменьшения масштаба, кажется, что window.innerWidth работает нормально. К сожалению, я не могу полагаться на то, что пользователь делает только небольшие жесты щипка :)

Я также пытался использовать свойство масштаба для объекта события жеста, но обнаружил, что это ненадежно, потому что вы не всегда знаете начальный масштаб при перезагрузке страницы или использовании кнопок «назад/вперед» для перехода к нему, даже когда используя метатег, чтобы указать его.

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

Вот код, который я использую для получения innerWidth:

document.body.addEventListener('gestureend', function (evt) {
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);

Спасибо!


person Loktar    schedule 14.08.2009    source источник


Ответы (1)


Если вы пытаетесь ограничить только максимальный уровень масштабирования, вы можете использовать специальный тег управления окном просмотра Safari:

<meta name="viewport" content="maximum-scale=2.0">

См. спецификацию Safari для мобильных устройств спецификация метатега окна просмотра для получения подробной информации.

person phatblat    schedule 03.06.2010