ピンチを検出してiOSをズームする

Question

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

ほとんどのページでは、ズームを必要としないようにサイズを変更するモバイルバージョンがありますが、「フロントカバー」では、クライアントはユーザーが固定ページで全体のページを見ることができるようにしたいと考えています（つまり、モバイルに最適化されたページと同じサイズになります）、カバー・イメージだけを拡大して、同じサイズのヘッダー・バーを残すことができます。

ユーザーがピンインしてズームインすると、このヘッダーバーが必ずしも大きくならないという問題があります。

だから私は、現在のピンチズームレベルを検出し、固定ヘッダーバーを縮小して、元のページが

私は基本的に100％幅のdivに収まる画像でこれを行うことができましたが、ズーム後に残っている実際の可視領域を再調整するためにdivが必要です。

jQuery Mobileトランジションの一部として、ズームを1：1にアニメーション化して、次のページが「モバイルフレンドリー」である必要はないので、ズームしないようにしたいと思います。

ここからどこから始めればいいですか？

Answer 1

現在の縮尺レベルを報告するメインページの本文/コンテナにイベントを添付することができます。たとえば、jQueryのを使用して：あなたは「event.preventDefault」を使用しない場合は、ページ全体が正常にスクロールしなければならない、とヘッダがあなたのロジックに従って自分自身を修正する必要があります

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

     var scale = event.originalEvent.scale; 

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

。また、 "gesturestart"イベントと "gestureend"イベントにバインドすることもできます。

さらに読み取り/解説：http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

「ヘッダがズームするのではなく、ページの残りのためにそうしないために夢の世界では、私がしたい何があります。」

gesturechangeイベント内でheader.style.WebkitTransform = 'scale(' + zoomvalue + ');を設定すると、ズームレベルを「元に戻す」ことができます（ズームしないヘッダーをシミュレートします）。

ヘッダーを固定幅にし、その幅とwindow.innerWidthに比例してズームを適用します。

AFAIK実際のズームレベルは、device-independent-pixel（DIP）と論理ピクセルの比率に依存し、AFAIKはJavaScriptからそれを見つける方法がないため、実際のズームレベルを見つける方法はありません。