16

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

Drew LeSueur
  • 19,185
  • 29
  • 89
  • 106

4 Answers4

11

[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
    );
});
William Niu
  • 15,798
  • 7
  • 53
  • 93
1

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

Robin Lu
  • 63
  • 1
  • 8
  • I need to be able to set the entire browser's zoom level via JavaScript. Specifically, I need to capture a double-tap and set the zoom level to an amount I feel appropriate. I don't want to change the sizes of DOM elements to achieve this. The user needs to be able to switch from pinch zoom to double-tap zoom seamlessly. – JoshNaro Mar 24 '11 at 16:12
  • Then what do you want to be done differently than the original double-tap/pinch gestures for Safari? – William Niu Mar 27 '11 at 00:47
1

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.

JoshNaro
  • 2,047
  • 2
  • 20
  • 40
  • I also tried to simulate a double tap event using `document.createEvent("TouchEvent");`, `.initTouchEvent(…)`, `document.createTouch(…)` and all that jazz, however, without success. The events are recognized by the JavaScript engine, but not by Safari's viewport controller. – Lenar Hoyt Mar 23 '15 at 20:17
  • This was a while ago, but I think we ended up just changing widths and heights and loading higher quality imagery as a work around. That is, we artificially zoomed. – JoshNaro Mar 24 '15 at 15:34
  • Interesting solution, thanks for the follow-up. I just figured out that one can sorta change the zoom level by manipulating the meta[name=viewport] tag. It's not a smooth transition, but perhaps one can read out the window dimensions and scrolling position and then successively adjust the width and maximum/minimum scale parameters. – Lenar Hoyt Mar 25 '15 at 14:56
0

Try this:

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

Source

Community
  • 1
  • 1
ngen
  • 8,816
  • 2
  • 18
  • 15