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

Question

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

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

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

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

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

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

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

Answer 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

Answer 2

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

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

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

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