30

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:

enter image description here

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();..
}
Basj
  • 41,386
  • 99
  • 383
  • 673
Bram
  • 4,533
  • 6
  • 29
  • 41
  • Paste some of you code or a fiddle. Without code we cant help much.Use CSS. – AnaMaria Jul 22 '13 at 08:03
  • for starters have at look at this http://stackoverflow.com/questions/4049342/how-can-i-zoom-a-div-in-firefox-and-opera – Sunny Patel Jul 22 '13 at 08:04
  • 1
    @sunny. He is not looking to zoom into the entire site. he's looking to zoom only the text part... – AnaMaria Jul 22 '13 at 09:03
  • I updated my post. It includes a basic fiddle now ;) Thanks for helping in advance. – Bram Jul 22 '13 at 09:42
  • you can try add event listner and prevent defaults (user can't zoom page) and after that zoom a specific element – David Jul 28 '13 at 09:01

2 Answers2

21

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...

1nfiniti
  • 2,032
  • 14
  • 19
  • Thank you for the answer. I will take a look at the suggested library. I will give you the 50 points because your answer seems pretty solid to me. – Bram Jul 30 '13 at 07:14
  • 3
    Note that with the new HammerJS version (2.0.4 at least) the event object has different members, and will be missing the "gesture" member. In stead you can use event.scale for newer HammerJS versions. Check the API reference for the complete event object layout: http://hammerjs.github.io/api/ – kvdv Mar 30 '15 at 12:10
  • 1
    `maximum-scale=1.0` does not fix viewport scaling on desktop environments – Tom Dec 20 '19 at 23:44
1

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

John Weisz
  • 30,137
  • 13
  • 89
  • 132
Arun Bertil
  • 4,598
  • 4
  • 33
  • 59