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

i want zoom specific element of website (a div), if user zooms website on mobile device. following picture shows idea:

as can see, test zoomed top div stays same size; div contains test zoomed / scaled.

could give me tips on how achieve this? don't know start.

update: http://jsfiddle.net/wyqsf/. if zoom in on page, scale both elements. want adjust content element when zooming. 1 way can think of achieve retrieve user-input , use javascript adjust div's width contradictory usual behavior.

pseudo-code:

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

in order this, need fix user's viewport cannot pinch zoom page, , use touch events library hammer.js attach callback pinch zoom gesture appropriately resizes element on page you'd scale.

viewport fixing happens in head element of html:

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

you use hammer.js detect "pinch zoom" gesture, , library gives detailed event.gesture object can use detect how much/how fast user zooming.

the change in distance between 2 touch points while pinching represented event.gesture.scale (see hammer documentation), if scale increases, increase text accordingly ... if decreases decrease text-size. use math:

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

i imagine idea...