Fit element to viewport width when zoom

Question

I have a div that contains text and images. I want to allow the user to pinch-zoom to change the size of the text/images, but I don't want the display to ever require horizontal scrolling (ie, regardless of the zooming, I want the div to fill the viewport's width).

I've seen lots of posts about the viewport (and I do use the "viewport" meta tag in the header), but I don't know how to change the div's width so the text/images always wrap to the viewport's width. It seems like I'd need to catch some sort of sizing/zooming events using javascript and resize the div, but that's beyond my knowhow. Thanks!

Answer 1

Interesting question. I would approach it in two steps:

1. Detect the pinch zoom event with jQuery Mobile. You'll either need to write your own function or use a third-party plugin to detect the pinch zoom.

2. An event handler that sets the div width equal to viewport width.

So if you used jQuery Mobile and the Touchy plugin, for example, you'd come up with something like:

$( '.mydiv' ).on('touchy-pinch', function() {
        $( this ).css( "width", $( window ).width());
});