6

ユーザーが JavaScript でページをズームイン/ズームアウトするためにピンチまたはダブルタップした後に、ピクセル単位のサイズまたはビューポートのスケール値を取得する方法を知っている人はいますか?

window.innerWidth を使用してみましたが、さまざまな結果が得られました。ビューポートが表示しているピクセル数を正確に示しているように見える場合もありますが、ページをズームインしてからズームアウトするために大きなピンチを行うと、window.innerWidth は 600 ～ 700 程度になります。ページの ~200px を表示しています。ページの幅はわずか 400 ピクセルで、ページ サイズを超えてズームアウトしたときに表示されるチェック模様の「行き過ぎた」背景は表示されませんでした。

ズームインおよびズームアウトするために小さなピンチを行うと、window.innerWidth は問題なく動作するように見えます。残念ながら、ユーザーが小さなピンチ ジェスチャを行うだけに頼ることはできません :)

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

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

innerWidth を取得するために使用しているコードは次のとおりです。

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

ありがとう！

4

1 に答える 1

2

最大ズーム レベルを制限するだけの場合は、Safari 固有のビューポート コントロール タグを使用できます。

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

詳細については、Safari モバイル固有のビューポート メタ タグの仕様を参照してください。

于 2010-06-03T03:51:08.143 に答える