11

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

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

问题是一旦用户捏放大，这个标题栏就会变得不必要的大。

所以我想做的是检测当前的缩放级别并缩小固定的标题栏，以便在放大底层页面时“看起来”相同的大小（相对于周围的电话界面）。

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

我还想成为 jQuery Mobile 过渡的一部分，将缩放设置为 1:1，以便以下“移动友好”页面不会放大，因为它们不需要。

那么有没有人有任何想法从哪里开始？

4

2 回答 2

9

您可以将事件附加到将报告当前比例级别的主页的主体/容器。例如，使用 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

于 2012-01-23T16:07:11.373 回答
0

“在一个梦幻世界中，我希望标题不要缩放，而是让页面的其余部分这样做。”

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

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

AFAIK 无法找出实际的缩放级别，因为它取决于设备独立像素(DIP) 与逻辑像素的比率，而 AFAIK 无法从 JavaScript 中找出这一点。

于 2012-08-08T05:16:30.107 回答