Изменить местоположение div на Zoom Mobile Safari

Question

У меня очень тяжелое время, сохраняя местоположение div по отношению ко всему экрану, когда пользователь приближается. В основном, я пытаюсь переместить div в правильно рассчитанное местоположение что кажется, что он никогда не перемещался, даже если пользователь мог увеличить масштаб. Это быстро становится очень сложным, поскольку я в основном хочу отменить любые визуальные изменения, которые были сделаны событием масштабирования.

Например, если верхняя часть div находится в центре экрана на уровне масштабирования 1 (скажем, шкале 1,00), когда пользователь переходит на уровень увеличения 2 (с помощью жесткого увеличения масштаба, скажем, масштаба из 1.235), я хотел бы переставить верхнюю часть div назад в центр экрана.

В настоящее время я привязываю родительский контейнер div к функции, которая ловит события жестов.

см. Ссылку для источника.

Любое руководство по этому вопросу будет оценено по достоинству. Благодарю.

Обновление: здесь приведена ссылка на пример приложения. Вы можете найти все мои текущие обработчики и функциональность. Моя главная проблема - сброс элемента «palmGuard» в том же месте по сравнению с экраном после масштабирования. Дайте знать, если у вас появятся вопросы.

Ссылка: http://restingrobot.com/test/testScale.html

Этот пример работает только на мобильном сафари

Answer 1

Хорошо, я считаю, что это делает то, что вы хотите.

Вместо использования коэффициента масштабирования вам необходимо рассчитать положение div пропорционально экрану iOS. Вам нужно будет отслеживать это во всем. Всякий раз, когда DIV перемещается (не масштабируется) и в начале вам нужно, чтобы получить это значение:

//When div moved and start 
var height = window.innerHeight; //Adjust if needed 
screenPos = (currentDivTop - window.pageYOffset)/height; 

Затем, когда масштабирование происходит, вы должны установить в верхней части DIV на gestureEnd до верхней точки страницы на (т.е. window.pageYOffset), а также текущее количество пикселей на экране (window.innerHeight) раз по относительной позиции на экране iOS, который мы рассчитали ранее (screenPos). Это дает вам новое положение на экране (не разница с последним).

//GestureEnd of zoom 
var height = window.innerHeight; //Adjust if needed 
var newDivTop = window.pageYOffset + (screenPos*height); 

Помните, что вам нужно будет отслеживать это значение пропорции.

Кроме того, я думаю, что ваша логика для масштабирования «обвязки» слишком проста, то есть, если это нужно для обработки, когда масштабирование отскакивает назад в пределах своего диапазона? Я не думаю, что он учитывает различные размеры экрана iOS.

Как и «обвязка», воздействующая на innerHeight, это также влияет на значение posYOffset, что действительно имеет смысл. Это приведет к тому, что div будет помещен ниже страницы. Один из возможных способов этого - обнаружить, когда масштабирование зашло слишком далеко (обвязка, когда вы ссылаетесь на него), и используя функцию опроса, обнаруживающую, когда innerHeight упал до минимума, затем получите posYOffset. Если существует событие после того, как опрос диапазонов, очевидно, не потребуется.

Вы могли быть в состоянии вычислить правильные верхнюю часть экрана (posYOffset) от значения полосатости innerHeight, но я думаю, что это может зависеть от того, где на зуме пальцы место при масштабировании.

Аналогично значение posYOffset и innerHeight, похоже, изменить после этого события gestureEnd, так что даже без полосатости происходит вы будете нуждаться в каком-то механизме, чтобы подобрать установившееся значение pageYOffset и innerHeight. Вы можете проверить этот эффект, добавив следующие gestureEnd:

//In gestureEnd 
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height); 
setTimeout(function() { 
       alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight); 
         }, 
      2000); 

Answer 2

Ну я буду честен и скажу вам, что я еще не работал на мобильных приложениях/webstes. Поэтому я не могу быть прав во всем синтаксисе, если они отличаются от традиционного jquery, используемого для веб-сайтов. Но вы можете попробовать приведенный ниже алгоритм (который в основном позиционирует div в центре страницы сверху). Я использовал традиционный jquery, так как я знаком с ним.

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */ 

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height')); 
var windowH = $(window).height(); 
var modalPosY = (windowH - modalH)/2; 
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY); 

и, конечно, свойство CSS элемента div/должно быть абсолютным [если оно еще не установлено]. И то же самое можно сделать, чтобы центрировать вдоль оси х (заменяющего высоту с шириной)

Или

Вы можете использовать процентные значения для позиции DIV/элемента (который я полагаю, лучше работает) , Следующая статья поможет вам в этом: http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128. (Проверьте тестовый пример)