обнаружение щепотки, чтобы увеличить на iOS

Question

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

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

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

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

Я мог бы в основном сделать это с изображениями, которыеустановите div ширины 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», вся страница должна прокручиваться правильно, а заголовок должен корректироваться в соответствии с вашей логикой. Возможно, вы также захотите связать с «началом жеста» и «событиями жеста».

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

Answer 2

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

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

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

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