11

jQuery Mobileを使用して固定ヘッダーのページを表示しているため、iOS（および実際にはAndroid）でピンチツーズームイベントを検出しようとしています。夢の世界では、ヘッダーがズームするのではなく、ページの残りの部分がズームすることを望みます。しかし、私はこれが不可能であることを知っています。

ほとんどのページでは、サイズを適切に変更してズームを不要にするモバイル バージョンを使用していますが、「表紙」では、クライアントは、ユーザーが十分な大きさの固定ヘッダーを使用してページ全体 (収まるように縮小) を表示できるようにしたいと考えています。使用可能 (つまり、モバイル向けに最適化されたページと同じサイズ) で、ヘッダー バーを同じサイズのままにして、カバー画像だけを拡大できるようにします。

問題は、ユーザーがピンチして拡大すると、このヘッダー バーが不必要に大きくなることです。

だから私ができるようにしたいのは、現在のピンチズームレベルを検出し、固定ヘッダーバーを縮小して、下のページがズームインしている間、(周囲の電話インターフェイスと比較して) 同じサイズに「見える」ようにすることです.

基本的には、幅 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 の間の比率でズームを適用します。

私の知る限り、デバイスに依存しないピクセル(DIP) と論理ピクセルの比率に依存するため、実際のズーム レベルを確認する方法はありません。また、JavaScript からそれを確認する方法もありません。

于 2012-08-08T05:16:30.107 に答える