检测捏放大在iOS上

我试图检测一个缩放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”事件。

进一步阅读/解释： http : //developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

“在梦幻世界里，我希望头部不要缩放，而是为了页面的其余部分。”

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

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

AFAIK没有办法find实际的缩放级别，因为它取决于设备无关像素 （DIP）与逻辑像素的比例，AFAIK无法从JavaScript中找出。