2009-08-14 8 views
6

JavaScriptでページを拡大/縮小するためにユーザーが挟んだりダブルタップしたりした後で、サイズをピクセル単位で取得する方法や、ビューポートのスケール値を知っている人はいますか?iPhone Webアプリケーションでピンチ/ズームした後、ビューポートのスケールをどのように取得しますか?

私はwindow.innerWidthを使用しようとしましたが、結果が混在しています。時々、ビューポートが表示されているピクセル数を正確に与えるようですが、ページをズームインしてズームアウトしてズームアウトすると、window.innerWidthは600-700程度になりますページの〜200ピクセルを示します。ページは400pxの幅しかなく、ページサイズを超えてズームアウトしたときに表示されるチェッカーの「あなたが過ぎてしまった」背景が表示されませんでした。

小さなピンチでズームイン/ズームアウトすると、window.innerWidthが正常に動作しているように見えます。残念ながら小さなピンチ動作をしているユーザーのみに頼ることはできません:)

ジェスチャーイベントオブジェクトでscaleプロパティを使用しようとしましたが、私はそれが常にわからないため信頼できないことがわかりましたメタタグを使用してページをリロードするときや、戻る/進むボタンを使用してそのページに移動するときの初期スケール。

最終的には、ユーザーが最大ズームレベルを超えてズームアウトしようとしていることを認識するアプリを作成しようとしています。これを行う別の方法がある場合、私はそれについて聞いています:)ここで

は、私ははinnerWidthを取得するために使用しているコードです。

document.body.addEventListener('gestureend', function (evt) { 
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures 
}, false); 

ありがとう!

答えて

2

あなただけの最大ズームレベルを制限しようとしている場合は、Safariの固有のビューポートコントロールタグを使用することができます

<meta name="viewport" content="maximum-scale=2.0"> 

の詳細については、Safariのモバイル特有のviewport meta tag specを参照してください。

関連する問題