CODEWITHSUNDEEP
ipadiossafarimobile-safarizooming
Drew LeSueur
Drew LeSueur

Reputation: 20145

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

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

Upvotes: 16

Views: 14477

Answers (4)

William Niu
William Niu

Reputation: 15853

[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
    );
});

Upvotes: 11

JoshNaro
JoshNaro

Reputation: 2097

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.

Upvotes: 1

Robin Lu
Robin Lu

Reputation: 73

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

Upvotes: 1

ngen
ngen

Reputation: 8966

Try this:

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

Source

Upvotes: 0

Related Questions