Question

我正在尝试在iOS（和Android上）检测到缩放缩放事件，因为我正在使用jQuery Mobile来显示带有固定标题的页面。在一个梦想的世界里，我想要的是标题不要缩放，而是让页面的其余部分这样做。但我知道这是不可能的。

在大多数页面上，我都有一个移动版本可以很好地调整自身尺寸，不需要缩放，但在“封面”上，客户希望用户能够看到整个页面（缩小以适应）与固定标题大到可以使用（即与移动优化页面成比例的相同尺寸），并且能够放大封面图像 - 使标题栏保持相同的大小。

问题是，一旦用户捏放大，这个标题栏就不一定很大。

所以我希望能够做的是检测当前收缩的缩放级别并缩小固定的标题栏，使其“看起来”相同的大小（相对于周围的电话界面），同时基础页面被缩放英寸

我基本上可以使用适合100％宽度div的图像，但是我需要使用div来重新调整缩放后留下的实际可见区域，并将其自身置于拖动上。

我也想参与jQuery Mobile转换的一部分，将缩放设置回1：1，以便以下“移动友好”页面不会放大，因为它们不需要。

所以有任何想法从何处开始？

Answer 1

您可以将事件附加到主页面的主体/容器，该主体/容器将报告当前的比例级别。例如，使用jQuery：

  $(container).bind("gesturechange", function(event) {

       var scale = event.originalEvent.scale;

      ...do some logic for header here. 
  });

如果您不使用“event.preventDefault”，整个页面应该正确滚动，并且标题应根据您的逻辑自行更正。您可能还想绑定到“gesturestart”和“gestureend”事件。

Answer 2

“在梦境中，我想要的是标题不要缩放，但页面的其余部分也要这样做。”

您可以在header.style.WebkitTransform = 'scale(' + zoomvalue + ');事件中设置gesturechange以“撤消”缩放级别（模拟非缩放标题）。

使标题宽度固定，并在该宽度和window.innerWidth之间按比例应用缩放。

AFAIK没有办法找出实际的缩放级别，因为它取决于device-independent-pixel（DIP）到逻辑像素的比例，而AFAIK则无法从JavaScript中找到它。