How can I use JavaScript to set the zoom level on mobile safari?

How can I use 开发者_C百科JavaScript to set the zoom level on mobile safari?

---

[UPDATED] It seems that you want to capture double taps in mobile Safari. You could do that by handling the touchend event, or use an available framework, such as provided in this site.

Take a look at the revised demo: http://jsbin.com/atayo4/20

  <p id="tap">double tap to zoom</p>
  <input id="zoomWidth" type="text" value="400" />
  <p id="feedback"></p>

---

$(document).ready(function(){
  $('#tap').doubletap(
    // double tap handler
    function(e) {
      $('#feedback').addClass('red').html('double tap! Zoom width: ' + $('#zoomWidth').val());

      var zoomWidth = $('#zoomWidth').val();

      // zoom with the new width
      $('meta[name="viewport"]').attr('content', 'width=' + zoomWidth + ', user-scalable:no');

      $('#zoomWidth').val(parseInt(zoomWidth, 10) - 25);
    },

    // single tap handler
    function(e) {
      $('#feedback').removeClass('red').html('single tap! Zoom width: ' + $('#zoomWidth').val());
    },

    // double tap delay, default 500
    400
    );
});

---

As far as I know, you can change the zoom factor the text size by changing the style '-webkit-text-size-adjust' of body element.

Check this link for more information:

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html%23//apple_ref/doc/uid/TP30001266--webkit-text-size-adjust

---

I tried manipulating the min/max scales and width in the meta tag with JavaScript to no avail. Instead of trying to set the zoom level with code (I'm thinking it's not possible), I'm going to create small invisible boxes on top of my relatively large image. This will allow users to zoom in (and out) via native double-tap on interesting sections of the image.

---

Try this:

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable:no;">

Source