5

ユーザーがズームインしたときに、画面全体に対する div の位置を維持するのに非常に苦労しています。ユーザーがズームした可能性があります。ズーム イベントによって行われた視覚的な変更を元に戻したいので、これはすぐに非常に難しくなります。

たとえば、div の上部が現在ズーム レベル 1 (スケール 1.00 とします) で画面の中央にある場合、ユーザーがズーム レベル 2 に移動すると (ピンチ ズーム ジェスチャを介して、スケール 1.235 とします)、 div の上部を画面の中央に再配置したいと思います。

現在、div の親コンテナーをジェスチャー イベントをキャッチする関数にバインドしています。

ソースについてはリンクを参照してください。

この問題に関するガイダンスをいただければ幸いです。ありがとう。

更新: これはサンプル アプリケーションへのリンクです。私の現在のハンドラーと機能のすべてを見つけることができます。私の主な関心事は、ズーム後に要素「palmGuard」を画面に対して同じ位置にリセットすることです。ご不明な点がございましたら、お知らせください。

リンク: http://restingrobot.com/test/testScale.html

この例は、モバイル サファリでのみ機能します。

4

2 に答える 2

0

正直に言って、私はまだモバイルアプリ/ウェブサイトに取り組んでいないことをお伝えします。したがって、Webサイトで使用される従来のjqueryと異なる場合、すべての構文が正しくない可能性があります。ただし、以下のアルゴリズムを試すことができます（基本的にdivを上からページの中央に配置します）。私はそれに精通しているので、従来のjqueryを使用しました。

/* ---- Excute the below lines on $(window).resize(function(){}); or a function that is triggered on zoom [which ever is correct] ---- */

var modalH = parseInt($('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('height'));
var windowH = $(window).height();
var modalPosY = (windowH - modalH) / 2;
$('[THE DIV/ELEMENT THAT YOU WANT TO CENTER]').css('Top', modalPosY);

そしてもちろん、div/elementのCSSプロパティは絶対でなければなりません[まだ設定されていない場合]。また、x軸に沿って中央に配置することもできます（高さを幅に置き換えます）

または

div / elementの位置にパーセンテージ値を使用できます（これはより適切に機能すると思います）。次の記事はそれについてあなたを助けます-http://novemberborn.net/2007/12/javascriptpage-zoom-ff3-128。（テストケースをチェックしてください）

于 2012-05-01T20:50:01.023 に答える
0

わかりました、これはあなたが望むことをするだろうと私は信じています。

ズーム係数を使用する代わりに、iOS画面に比例してdivの位置を計算する必要があります。全体を通してこれを追跡する必要があります。divが移動された（ズームされていない）ときはいつでも、開始時に次の値を取得する必要があります。

//When div moved and start
var height = window.innerHeight; //Adjust if needed
screenPos = (currentDivTop - window.pageYOffset)/height;

次に、ズームが発生したときに、gestureEndのdivの上部を、画面上のページの上部（つまり、window.pageYOffset）に加えて、iOS上の相対位置による画面上の現在のピクセル数（window.innerHeight）に設定する必要があります。以前に計算した画面（screenPos）。これにより、必要な画面上の新しい位置が得られます（前回との違いではありません）。

//GestureEnd of zoom
var height = window.innerHeight; //Adjust if needed
var newDivTop = window.pageYOffset + (screenPos*height);

この比率の値を追跡する必要があることを忘れないでください。

また、ズームの「バンディング」のロジックは非常に単純だと思います。つまり、ズームがその範囲内に戻ったときに処理するためのものである場合はどうでしょうか。iOSの画面サイズの違いは考慮されていないと思います。

innerHeightに影響を与える「バンディング」だけでなく、posYOffsetの値にも影響を与えるようです。これは本当に理にかなっています。これにより、divがページの下に配置されます。これを回避する1つの潜在的な方法は、ズームが行き過ぎたとき（参照時にバンディング）を検出し、ポーリング機能を使用して、innerHeightが最小値に戻ったことを検出し、posYOffsetを取得することです。バンディング後にイベントが存在する場合、ポーリングは明らかに必要ありません。

innerHeight値のバンディングから画面の正しい上部（posYOffset）を計算できる場合がありますが、ズーム時に指がどこにあるかによって異なると思います。

同様に、posYOffsetとinnerHeightの値は、gestureEndイベントの後で変化するように見えるため、バンディングが発生していなくても、pageYOffsetとinnerHeightの確定値を取得するためのメカニズムが必要になります。以下をgestureEndに追加することで、この効果をテストできます。

//In gestureEnd
alert ('gestureEnd pageY:'+window.pageYOffset+' height:'+height);
setTimeout(function () {
              alert ('later pageY:'+window.pageYOffset+' height:'+window.innerHeight);
                       }, 
           2000);
于 2012-04-30T14:53:27.260 に答える