Как я могу использовать JavaScript для установки уровня масштабирования на мобильном сафари?

Ответы

Ответ 1

[ ОБНОВЛЕНО] Кажется, что вы хотите захватить двойные краны в мобильном Safari. Вы можете сделать это, обработав событие touchend или используя доступную инфраструктуру, например, представленную в этом сайте.

Взгляните на измененное демо: 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
    );
});

Ответ 2

Насколько я знаю, вы можете изменить коэффициент масштабирования на размер текста, изменив стиль "-webkit-text-size-adjust" элемента body.

Посмотрите эту ссылку для получения дополнительной информации:

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

Ответ 3

Я пробовал манипулировать минимальными/максимальными масштабами и шириной в метатеге с помощью JavaScript безрезультатно. Вместо того, чтобы пытаться установить уровень масштабирования с помощью кода (я думаю, что это невозможно), я собираюсь создать маленькие невидимые прямоугольники поверх моего относительно большого изображения. Это позволит пользователям увеличивать (и выходить) с помощью нативного двойного касания на интересных участках изображения.

Ответ 4

Попробуйте следующее:

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

Источник