Масштабируемое/прокручиваемое HTML-окно в мобильных браузерах

Я пытаюсь создать окно <div> с внутренними элементами, чтобы иметь возможность прокручивать/масштабировать на мобильном устройстве с его содержимым, как здесь:

http://jsfiddle.net/hk1jfp4z/

Я хотел бы иметь возможность делать следующее:

  • Загрузка страницы: Масштабировать #scrollable_zoomable_background, чтобы соответствовать #window.
  • Чтобы увеличить масштаб с помощью двух жестов пальца, прокрутите с помощью сенсорного экрана, коснитесь
  • Остальная часть страницы не должна масштабироваться или горизонтально (с <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>)
  • #window не должен быть iframe, он должен быть частью структуры документа.

ОТВЕТЫ

Ответ 1

Во-первых, вы должны настроить viewport, чтобы отключить масштабирование страницы для пользователя. Затем вам нужно использовать библиотеку сенсорных событий, например hammer.js.

Это стандартное окно просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1">

Взгляните на документацию на молот - вы можете увидеть пример распознавателя pinch - именно то, что вам нужно!

Ответ 2

В ответ на ответ от AleshaOleg, вот как вы можете использовать HammerJS для реализации щепотки для увеличения → см. ручку в http://codepen.io/sheinzle/pen/mebBEd

Очевидно, что еще многое предстоит улучшить - event.originalEvent.gesture.scale сбрасывается до 1 при повторном повторении жестов. Поэтому вам нужно будет отслеживать текущий масштаб.

function attachPinch(imgID)
{
    var image = $(imgID);
    $(imgID).hammer().on("pinch", function(event) {
        var el = $(this);
        scale = event.originalEvent.gesture.scale;
        el.css('-webkit-transform', "scale3d("+scale+", "+scale+", 1)");   
   });
}

attachPinch('.pinch-object')
.pinch-object {
  width: 5000px;
  height: 5000px;
  
  background-color:#269;
  background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(90deg, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  
}
 <script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js"></script>

<div class="pinch-object"></div>