Zoom Specific Element On Webcontent (html,css,javascript)

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

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:

<metaname="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:

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

Check the JS Fiddle