Ipad 如何使用JavaScript在mobile safari上设置缩放级别？

如何使用JavaScript在mobile safari上设置缩放级别？

试试以下方法：

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

---

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

有关详细信息，请查看此链接：

---

[更新了]似乎您希望在mobile Safari中捕获双击。您可以通过处理

touchend

事件或使用中提供的可用框架来实现这一点

请看修订后的演示：

---

我尝试用JavaScript操纵meta标记中的最小/最大比例和宽度，但没有成功。我不再试图用代码设置缩放级别（我认为这是不可能的），而是在相对较大的图像上创建不可见的小框。这将允许用户通过本机双击图像中感兴趣的部分来放大（或缩小）。

但是你能用javascript实现吗？这不是答案，而是一个问题，如果用户在移动设备上禁用javascript会怎么样？您是否只针对使用Safari的移动浏览器？我需要能够通过JavaScript设置整个浏览器的缩放级别。具体来说，我需要捕捉双击并将缩放级别设置为我认为合适的大小。我不想改变DOM元素的大小来实现这一点。用户需要能够无缝地从按压缩放切换到双击缩放。那么，您希望与Safari的原始双击/按压手势有什么不同呢？我还尝试使用

document.createEvent（“TouchEvent”）模拟双击事件

，

.initTouchEvent（…）

，

document.createTouch（…）

以及所有这些jazz都没有成功。JavaScript引擎可以识别这些事件，但Safari的viewport controller无法识别。这是很久以前的事了，但我认为我们最终只是改变了宽度和高度，加载了更高质量的图像作为解决方案。也就是说，我们人为地放大了。有趣的解决方案，谢谢您的跟进。我刚刚发现，可以通过操作meta[name=viewport]标记来改变缩放级别。这不是一个平滑的过渡，但也许可以读取窗口尺寸和滚动位置，然后依次调整宽度和最大/最小比例参数。

  <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
    );
});