Zoom specific element on webcontent (HTML,CSS,JavaScript)

Question

I want to zoom only a specific element of my website (a certain div), if a user zooms the website on a mobile device. The following picture shows my idea:

As you can see, the test is zoomed but the top div stays the same size; only the div that contains test is zoomed / scaled.

Could someone give me some tips on how to achieve this? I really don't know where to start.

UPDATE: http://jsfiddle.net/WyqSf/. if I would zoom in on this page, it would scale both elements. I want to adjust just the content element when zooming. One way I can think of to achieve this is to retrieve the user-input and use javascript to adjust the div's width but this is contradictory with the usual behavior.

Pseudo-code:

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

Solution 1

In order to do this, you would need to fix the user's viewport so that they cannot pinch zoom the page, and then use a touch events library like Hammer.js to attach a callback to the pinch zoom gesture that appropriately resizes the element on the page you'd like to scale.

viewport fixing happens in the head element of your html:

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

you would use hammer.js to detect a "pinch zoom" gesture, and the library gives you a very detailed event.gesture object which you can use to detect how much/how fast the user is zooming.

The change in distance between the 2 touch points while pinching is represented by event.gesture.scale (see hammer documentation), if the scale increases, increase the text accordingly ... if it decreases decrease the text-size. Use Math:

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

I imagine you get the idea...

Solution 2

You could use the Zoomooz plugin. Inside the documentation, check the Zooming inside a container section -- this is what you may need:

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

Check the JS Fiddle