Обнаружение пинча для увеличения iOS

Я пытаюсь обнаружить щепотку, чтобы увеличить событие на iOS (и Android действительно), потому что я использую jQuery Mobile для отображения страниц с фиксированным заголовком. В мире мечты я хочу, чтобы заголовок не увеличивался, а остальная часть страницы делала это. Но я знаю, что это невозможно.

На большинстве страниц у меня есть мобильная версия, которая сама по себе изменяет размеры, делая ненужным масштабирование, но на "передней обложке" клиент хочет, чтобы пользователь мог видеть всю страницу (сокращаться до соответствия) с фиксированным заголовком достаточно большой для использования (т.е. того же размера, что и на мобильных оптимизированных страницах), и иметь возможность приближать только изображение обложки, оставляя панель заголовка там, где она имеет тот же размер.

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

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

Я мог бы в основном сделать это с изображениями, которые соответствуют размеру ширины 100%, но мне нужно, чтобы div обновлял фактическую видимую область, оставшуюся после масштабирования, и центрировал себя при перетаскивании.

Я также хотел бы сделать часть перехода jQuery Mobile, оживить масштаб до 1:1, поэтому следующие страницы, "дружественные к мобильному", не будут увеличены, так как они не должны быть.

У кого-нибудь есть идеи, с чего начать здесь?

Ответ 1

Вы можете прикрепить событие к телу/контейнеру главной страницы, на котором будет отображаться текущий уровень шкалы. Например, используя jQuery:

  $(container).bind("gesturechange", function(event) {

       var scale = event.originalEvent.scale;

      ...do some logic for header here. 
  });

Если вы не используете "event.preventDefault", вся страница должна прокручиваться правильно, и заголовок должен исправлять себя в соответствии с вашей логикой. Вы также можете привязываться к "gesturestart" и событиям "gestureend".

Дальнейшее чтение/объяснение: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Ответ 2

"В мире мечты я хочу, чтобы заголовок не увеличивался, а остальная часть страницы делала это".

Вы можете установить header.style.WebkitTransform = 'scale(' + zoomvalue + '); в событии gesturechange для "отмены" уровня масштабирования (имитировать заголовок без масштабирования).

Сделайте свой заголовок фиксированной шириной и примените масштаб пропорциональности между этой шириной и window.innerWidth.

AFAIK не существует способа узнать фактический уровень масштабирования, поскольку он зависит от не зависящего от устройства пикселя (DIP) до логического -pixel, и AFAIK нет способа узнать это из JavaScript.