2009-03-21 11 views
14

iPhoneのSafariで閲覧したときに、ページ上でユーザーのズームやパンを追跡する方法に関するオプションを探しています。 Safariは動きや動きのイベントを公開しているので、理論的にはパンとズーム操作の実行を継続することができますが、ブラウザは内部的にそれを追跡しなければならないので、残念です。Safari iPhone - ズームレベルとオフセットを検出する方法は?

この情報はDocument Object Modelを通じて公開されていますか?

答えて

2

Safari Web Content Guideによれば、ズームイベント(ダブルタップ)は公開されていないため、これをどのようにトラッキングできるかわかりません。

私はこの情報がDOMを介して公開されているとは思わないです。

1

スティーブの答えからちょっと動いたかもしれないと思うのですが、コンテンツガイドのリンクを見れば、Handling Multi-Touch EventsHandling Gesture Eventsというセクションがあります。

まだ試したことはありませんが、かなり有望です。 (

var zoom = document.documentElement.clientWidth/window.innerWidth; 

:私はそれらをチェックアウトし、利用可能なデモのリンクを持っているしたら、私はあなたがズームインすると

+0

google fastflip(http://fastflip.googlelabs.com/)それは可能ですので、確かに可能です – cobbal

+0

アップデートが来ましたか? ;) – alex

22

window.innerWidthが調整されている...更新を提供しますが、document.documentElement.clientWidthはそれゆえ、ではありません私はviewport<meta>なしでiOS4をテストしました。

しかし、私は何か重要なことはしません。モバイルブラウザーのDOMビューポートサイズ/ピクセルサイズare a complete mess

+0

ありがとうございました。それはハックですが、実際にはうまくいくかもしれないようですが、それは少なくとも何かです。 –

+3

'document.documentElement.clientWidth'にはスクロールバーが含まれず、' window.innerWidth'はスクロールバーを含みません。高さも同じです。 – icedwater

+0

Safari 10のスクロールバーを無視し、そのvar zoom = document.documentElement.clientWidth/window.outerWidth; – uchuugaka

0

私はこの方法(iOSの作品のみを)ズーム測定:

screenOrientedWidth = screen.width; 
if (window.orientation == 90) { 
    screenOrientedWidth = screen.height; 
} 
return screenOrientedWidth/window.innerWidth; 

それはコンテンツがどのように広いのは依存しません。

ただし、iOS Safari window.innerWidthgestureendハンドラ内で正しくありません。このような計算を後で実行するために延期する必要があります。 GWTではscheduleDeferredを使用していますが、これを純粋なJavaScriptで実装する方法については言いません。

1

モバイルSafariとAndroidでは、ページがどのくらいズームされたかを正確に測定する方法があります。

ここをクリックしてください:http://jsbin.com/cobucu/3 - ズームを変更してから測定をクリックしてください。

<body> 
<div id=measurer style="position:absolute;width:100%"></div> 

と計算を使用します:

テクニックは、トップレベルのdivを追加することです

function getZoom(){ 
    return document.getElementById('measurer').offsetWidth/window.innerWidth; 
} 

唯一の問題は、ユーザーがズーム(ピンチを変更したことを検出するための整頓方法を見つけることです、ダブルタップなど)。オプション:

  • webkitRequestAnimationFrame:非常に信頼性の高い、しかしjankinessを引き起こす可能性が高いアニメーションを使用している場合(これはパフォーマンスヒットに)
  • のsetInterval:信頼性が、非常に醜い
  • タッチイベント:2本の指または を探してダブルタップWikWebViewまたはMobile Safari 8以上でパフォーマンスの問題が発生する可能性があります。編集:and onscrollは、パフォーマンス上の問題を引き起こす可能性があります)。

PS:Windowsの携帯電話は、( - Windows上でピンチズームはJavaScriptに表示されていないその自身別のビューポートを持ってピンチズームビューポートを変更しない)別のソリューションを必要とします。

関連する問題