logo标签列表

如何使用JavaScript在移动版Safari上设置缩放级别？

ipadiossafarimobile-safarizooming
16

如何使用JavaScript在移动Safari上设置缩放级别？

4个回答
11

[更新] 似乎你想在移动版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
    );
});
1
我需要能够通过JavaScript设置整个浏览器的缩放级别。具体来说，我需要捕获双击事件并将缩放级别设置为我认为合适的值。我不想改变DOM元素的大小来实现这一点。用户需要能够无缝地从捏合缩放切换到双击缩放。 - JoshNaro
那么，您希望Safari的双击/捏合手势与原始手势有何不同？ - William Niu
1

我尝试使用JavaScript操纵meta标签中的最小/最大比例尺和宽度，但没有成功。我认为无法通过代码设置缩放级别，因此我打算在相对较大的图像上创建小的不可见框。这将允许用户通过原生双击图像上有趣的部分来放大（或缩小）。

我也尝试使用 document.createEvent("TouchEvent");, .initTouchEvent(…), document.createTouch(…) 等方法来模拟双击事件，但是没有成功。虽然 JavaScript 引擎能够识别这些事件，但是 Safari 的视口控制器却不能。 - Lenar Hoyt
这是一段时间以前的事情了，但我记得我们最终只是改变了宽度和高度，并加载了更高质量的图像作为解决方法。也就是说，我们进行了人为缩放。 - JoshNaro
有趣的解决方案，感谢跟进。我刚刚发现可以通过操作meta[name=viewport]标签来改变缩放级别。虽然不是很平滑的过渡，但也许可以读取窗口尺寸和滚动位置，然后逐步调整宽度和最大/最小比例参数。 - Lenar Hoyt
0

试试这个：

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

源代码

但是你能用JavaScript做到吗？ - Drew LeSueur
不是回答而是一个关注点，如果用户在他们的移动设备上禁用了JavaScript怎么办？你只针对使用Safari的移动浏览器吗？ - ngen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接