Safari iPhone - Как определить масштаб и смещение?

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

Открыта ли эта информация через объектную модель документа?

Ответ 1

Когда вы увеличиваете масштаб, window.innerWidth настраивается, но document.documentElement.clientWidth нет, поэтому:

var zoom = document.documentElement.clientWidth / window.innerWidth;

(Я тестировал iOS4, без viewport <meta>).

Однако я бы не стал полагаться на это ни на что важное. Размеры/размеры пикселей DOM в мобильных браузерах - полный беспорядок.

Ответ 2

В соответствии с Руководство по веб-контенту Safari события трансляции (двойное нажатие) не отображаются, поэтому я не уверен, как вы можете отслеживать это.

Я не верю, что эта информация открыта через DOM.

Ответ 3

На самом деле я думаю, что все могло немного измениться со времени ответа Стива, так как он посмотрел ссылку на содержание, которую он предоставил. Я вижу раздел Обработка событий Multi-Touch, а также Обработка событий жестов.

Не пробовал, но они выглядят довольно многообещающими. Я предоставлю обновление после того, как проведу их, и у вас будет доступная демонстрационная ссылка...

Ответ 4

В Mobile Safari и Android, это точный способ измерения того, насколько увеличена страница.

Попробуйте здесь: http://jsbin.com/cobucu/3 - измените масштаб, а затем выберите меру.

Техника заключается в добавлении div верхнего уровня:

<body>
<div id=measurer style="position:absolute;width:100%"></div>

и используйте вычисление:

function getZoom(){
    return document.getElementById('measurer').offsetWidth / window.innerWidth;
}

Единственная проблема - найти аккуратный способ обнаружить, что пользователь изменил масштаб (щепотку, двойной кран и т.д.). Параметры:

webkitRequestAnimationFrame: очень надежно, но, вероятно, вызывает язвительность при использовании анимаций (из-за повышения производительности)
setInterval: надежный, но очень уродливый
события касания: найдите два пальца или двойной кран: уродливый и, возможно, трудно сделать 100% надежным
window.onresize + window.onorientationchange + window.onscroll: простой, но полностью ненадежный (Edit: и onscroll может вызвать проблемы с производительностью в WKWebView или Mobile Safari 8 или выше).

PS: Windows Phone нуждается в другом решении (щепотка-зум не изменяет видовое окно - масштабирование в Windows имеет свой отдельный видовой экран, который не виден javascript).

Ответ 5

Я измеряю масштаб таким образом (работает только на iOS):

screenOrientedWidth = screen.width;
if (window.orientation == 90) {
    screenOrientedWidth = screen.height;
}
return screenOrientedWidth / window.innerWidth;

Это не зависит от того, насколько широко распространен контент.

Однако в iOS Safari window.innerWidth неверно внутри обработчика gestureend. Вы должны отложить такой расчет для последующего исполнения. В GWT я использую scheduleDeferred, но я не могу сказать, как реализовать это в чистом JavaScript.