Как я могу использовать JavaScript, чтобы установить уровень масштабирования в мобильном сафари? - PullRequest
Новая
       28

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

14 голосов
/ 21 декабря 2010

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

Ответы [ 4 ]

11 голосов
/ 25 марта 2011

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

Взгляните на пересмотренную демонстрацию: 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
    );
});
1 голос
/ 25 марта 2011

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

1 голос
/ 24 марта 2011

Насколько я знаю, вы можете изменить коэффициент увеличения размера текста, изменив стиль '-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

0 голосов
/ 21 декабря 2010

Попробуйте это: 

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

Источник

...