如何使用 JavaScript 设置移动 Safari 的缩放级别？答案

【问题标题】：How can I use JavaScript to set the zoom level on mobile safari?如何使用 JavaScript 设置移动 Safari 的缩放级别？
【发布时间】：2011-05-28 23:41:37
【问题描述】：

如何使用 JavaScript 设置移动 safari 的缩放级别？

【问题讨论】：

标签： ipad ios safari mobile-safari zooming

【解决方案1】：

[已更新] 您似乎想在移动 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
    );
});

【讨论】：

【解决方案2】：

据我所知，您可以通过更改 body 元素的样式“-webkit-text-size-adjust”来更改文本大小的缩放系数。

【讨论】：

我需要能够通过 JavaScript 设置整个浏览器的缩放级别。具体来说，我需要捕获双击并将缩放级别设置为我认为合适的数量。我不想改变 DOM 元素的大小来实现这一点。用户需要能够从捏缩放无缝切换到双击缩放。
那么您希望与 Safari 的原始双击/捏合手势有什么不同？

【解决方案3】：

我尝试使用 JavaScript 操作元标记中的最小/最大比例和宽度，但无济于事。与其尝试使用代码设置缩放级别（我认为这是不可能的），不如在我相对较大的图像上创建小的不可见框。这将允许用户通过本机双击图像的有趣部分来放大（和缩小）。

【讨论】：

我还尝试使用document.createEvent("TouchEvent");、.initTouchEvent(…)、document.createTouch(…) 和所有爵士乐来模拟双击事件，但是没有成功。 JavaScript 引擎可以识别这些事件，但 Safari 的视口控制器无法识别这些事件。
这是不久前的事情，但我认为我们最终只是改变了宽度和高度并加载更高质量的图像作为解决方法。也就是说，我们人为地放大了。
有趣的解决方案，感谢您的跟进。我刚刚发现可以通过操纵 meta[name=viewport] 标签来改变缩放级别。这不是一个平滑的过渡，但也许可以读出窗口尺寸和滚动位置，然后依次调整宽度和最大/最小比例参数。

【解决方案4】：

试试这个：

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

Source

【讨论】：

但是你能用javascript做吗？
不是一个答案而是一个问题，如果用户在他们的移动设备上禁用了 javascript 怎么办？您是否只针对使用 Safari 的移动浏览器？