Elemento zoom specifico su webcontent (HTML, CSS, JavaScript)

Question

Voglio zoomare solo un elemento specifico del mio sito web (un certo div), se un utente ingrandisce il sito web su un dispositivo mobile. La figura seguente mostra la mia idea:

Come si può vedere, il test è ingrandito, ma il div superiore rimane la stessa dimensione; solo il div che contiene test viene ingrandito/ridimensionato.

Qualcuno potrebbe darmi qualche consiglio su come raggiungere questo obiettivo? Non so davvero da dove cominciare.

AGGIORNAMENTO: http://jsfiddle.net/WyqSf/. se eseguissi lo zoom su questa pagina, ridimensionerebbe entrambi gli elementi. Voglio regolare solo l'elemento di contenuto durante lo zoom. Un modo in cui posso pensare di ottenere questo è recuperare l'input dell'utente e usare javascript per regolare la larghezza del div, ma questo è in contraddizione con il solito comportamento.

pseudo-codice:

container.mousemove { 
    content.changeWidth();.. 
} 

Answer 1

Per fare questo, si avrebbe bisogno di risolvere viewport dell'utente in modo che non possano pizzicare ingrandire l' pagina e quindi utilizzare una libreria di eventi tocco come Hammer.js per allegare una richiamata al gesto di zoom a pizzico che ridimensiona opportunamente l'elemento sulla pagina che si desidera ridimensionare.

fissaggio viewport accade nella testa del vostro elemento HTML:

<meta name="viewport" content="width=device-width, maximum-scale=1.0"> 

si usa hammer.js per rilevare un gesto "pinch zoom", e la libreria ti dà un oggetto molto dettagliata event.gesture che è possibile utilizzare per rilevare quanto/quanto velocemente l'utente sta eseguendo lo zoom.

Il cambio di distanza tra i 2 punti di contatto durante la presa è rappresentato da event.gesture.scale (see hammer documentation), se la scala aumenta, aumentare il testo di conseguenza ... se diminuisce diminuisce la dimensione del testo. Uso la matematica:

$('body').hammer().on("pinch", function(event) { 
    console.log(event.gesture.scale); 
    // do math... 
}); 

Immagino che l'idea ...

Answer 2

Si potrebbe utilizzare il plugin Zoomooz. All'interno della documentazione, controllare la sezione Zooming inside a container - questo è quello che potrebbe essere necessario:

<div class="zoomViewport"> 
    <div class="zoomContainer"> 
     <div class="zoomTarget">Target 1</div> 
     <div class="zoomTarget">Target 2</div> 
    </div> 
</div> 

Check the JS Fiddle