Safari iPhone - Как определить уровень масштабирования и смещение? - PullRequest
Новая
       21

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

17 голосов
/ 21 марта 2009

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

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

Ответы [ 6 ]

24 голосов
/ 24 июня 2010

При увеличении window.innerWidth настраивается, но document.documentElement.clientWidth нет, поэтому: 

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

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

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

2 голосов
/ 21 апреля 2015

В 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).

Редактировать: Android Visual Viewport изменения размера и прокрутки события могут помочь? См https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#Events

2 голосов
/ 22 августа 2009

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

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

1 голос
/ 11 марта 2010

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

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

0 голосов
/ 31 августа 2018

Если вы используете какие-либо элементы с местоположением: исправлено, это может усложниться, так как местоположение: фиксированные координаты относятся к окну без увеличения, где координаты окна относятся к увеличенному окну просмотра. Дополнительная информация: Как разместить элемент фиксированного расположения в браузере IOS при увеличении?

0 голосов
/ 01 июня 2014

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...