Question

maybe a clue :

    <meta name="viewport" content="width='+ my div Width+'", initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Answer 1

Meta tags are used by the browser when first parsing your page, but are not re-evaluated or accessible after that period.

Theoretically, you could adjust the scale by forwarding the user to a new page on a certain event, with scale set to certain amount and scroll to the location on the page (a hash tag) that you’re looking for. That being said, you’re going to incur huge loading times on mobile devices unless you can properly pre-cache these pages.

See this question in regards to zooming in a canvas.

Basically, for mobile devices, you’re not likely to get functionality as you want it, but you are likely able to mimic it in an intuitive way for the user.

E.g. “user clicks an image”

1) Hash tag change to scroll to the image

window.location.hash = "#image"

2) Adjust size of image to 100% width

$('#my_image').attr('width', '100%')

3) Assign a listener to zoom out when the user interacts again

$(document.body).click( function() { 
  $('#my_image').removeAttr('width', null);
});

Hopefully this will help you work through to your solution.