Zoomable/Scrollable HTML "finestra" in browser mobili

Question

Sto cercando di creare una finestra <div> con elementi interni in grado di scorrere/zoom sul cellulare con il suo contenuto come qui:

http://jsfiddle.net/hk1jfp4z/

avrei piace essere in grado di fare seguente:

1. al caricamento della pagina: Scala #scrollable_zoomable_background per adattarsi al #window.
2. Per essere in grado di zoomare con due movimenti del dito, scorrere con TouchStart, touchend
3. Il resto della pagina non deve diminuire, né scorrere orizzontalmente (con <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>)
4. Il #window non deve essere un iframe, ha bisogno essere parte della struttura del documento.

Answer 1

In primo luogo, è necessario impostare lo viewport per disabilitare lo zoom della pagina per l'utente. Quindi è necessario utilizzare la libreria di eventi touch come hammer.js.

Questo è viewport standart:

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

Date un'occhiata per un documentation di martello - si può vedere un esempio di pinch riconoscitore - che esattamente quello che ti serve!

Answer 2

In seguito alla risposta da AleshaOleg, qui è una funzione come è possibile utilizzare HammerJS per implementare pinch to zoom -> vedi penna a http://codepen.io/sheinzle/pen/mebBEd

Ovviamente c'è ancora molto da migliorare - event.originalEvent.gesture.scale reimposta a 1 il la prossima volta rifai i gesti. Quindi avresti bisogno di tenere traccia della scala attuale.

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>