10

タブレットデバイス（iOSおよびAndroid）でレンダリングされたWebページ上のビューポートの重心を計算しようとしています。つまり、現在の翻訳と現在のズームレベルに応じたビューポートの実際の重心（表示されているもの）です。ドキュメント自体の中心、私が見ているものを画面の中心にしたい。

問題は、この計算ではズーム（当時）の変換が考慮されていないことです。

iOSでは、これらの回答のいくつかを試してみました。iOSでズームするためのピンチを検出する質問では、イベント「OnZoom」をキャッチできましたが、値は得られませんでした。

Androidでは、ズームに関連するイベントをキャッチすることすらできません。touchmoveイベントとtouchstartイベントを認識していますが、ズーム（およびズーム値）を取得するために、どのように区別できますか？

jQuery1.7.2ライブラリを使用しています。

4

3 に答える 3

2

iPhone iPad、Samsung Galaxy Tab 10で動作することが確認されているデモページを作成しました。巨大なdivにクリックイベントを添付しただけなので、ズーム後に画面をタップして表示を更新します。

計算は非常に簡単screen.width/window.innerWidthです。ズームレベルを取得するために使用します。screen.width常にデバイスピクセルで表示され、window.innerWidth常にcssピクセルで表示されます。これにより、ズームも考慮されます。

さらなる計算は単純な数学です：

// round the result down to avoid "half pixels" for odd zoom levels
Math.floor(window.scrollY + window.innerHeight/2);
Math.floor(window.scrollX + window.innerWidth/2);

ユーザーがズームしているかどうかを確認するには、リスナーをに接続しwindow.resize、アドレスバーを非表示にしてズームしたwindow.scroll後に起動します。orientationchange

これが私のデモJavaScriptです：

var dot = document.getElementById("dot");
document.getElementById("main").addEventListener("click", function(e) {
    var zoom = screen.width / window.innerWidth;
    alert("zoom: " + zoom + "\n" + "ScrollY: " + window.scrollY);

    dot.style.top = Math.floor(window.scrollY + window.innerHeight/2 - 5) + "px";
    dot.style.left = Math.floor(window.scrollX + window.innerWidth/2 - 5) + "px";

}, false);
于 2012-07-18T23:41:11.093 に答える
1

簡単なHTMLページを設定すると、中心にかなり近づくことができます。

以下のコードでは、固定divの幅と高さを確認し、それをドキュメントオフセットといくつかの簡単な計算と組み合わせて中心を計算し、そこに1つの黒い点を配置しています。かなり近づけることができますが、iPhone4Sによって異なります。

Androidデバイスで試したことはありません。

iOS <= 4では固定位置をサポートしていないため、これは機能しないと思います。

<style>
#fixed{
position: fixed;
left: 0; right: 0; top: 0; bottom: 0;
background: orange; opacity: 0.25;
}
.black{
  position: absolute;
  top:0;left:0;
  width: 1px; height: 1px;
  background: black;
}
</style>

<body>
<div id="fixed"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
jQuery(function($){
setInterval(function(){
var top = ($("#fixed").height()/2) + $("#fixed").offset().top;
var left = ($("#fixed").width()/2) + $("#fixed").offset().left;
$("body").append('<div class="black" style="top: '+top+'px; left: '+left+'px;" />');
}, 1500)

});
</script>
</body>
于 2012-07-18T03:24:31.980 に答える
1

数年前、クライアントにjavascriptのページズーム検出方法をリクエストしてもらいました。

私の場合、彼はそれがFacebookアプリで動作することを望んでいました。iframeキャンバス/ビューポートを介して。

最大関数と最小関数を使用しました

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}

function getMinHeight(h) {
return Math.min(viewport.currentHeight, getDocHeight(), h);
}

getMinWidthも同様でしたが、ブラウザーベースの調整を適用する必要がありました。

固定位置divのプロパティを格納するビューポートと呼ばれるオブジェクトを作成しました。具体的には、currentHeightとcurrentWidthはdiv要素のoffsetHeightとoffsetWidthでした。

結局、window.intervalTimerを初期化して、ビューポートオブジェクト内に格納されている値と比較して、そのdivの状態のチェックを実行しました。

于 2012-07-24T02:24:36.480 に答える