iPhoneのSafariで閲覧したときに、ページ上でユーザーのズームやパンを追跡する方法に関するオプションを探しています。 Safariは動きや動きのイベントを公開しているので、理論的にはパンとズーム操作の実行を継続することができますが、ブラウザは内部的にそれを追跡しなければならないので、残念です。Safari iPhone - ズームレベルとオフセットを検出する方法は?
この情報はDocument Object Modelを通じて公開されていますか?
iPhoneのSafariで閲覧したときに、ページ上でユーザーのズームやパンを追跡する方法に関するオプションを探しています。 Safariは動きや動きのイベントを公開しているので、理論的にはパンとズーム操作の実行を継続することができますが、ブラウザは内部的にそれを追跡しなければならないので、残念です。Safari iPhone - ズームレベルとオフセットを検出する方法は?
この情報はDocument Object Modelを通じて公開されていますか?
Safari Web Content Guideによれば、ズームイベント(ダブルタップ)は公開されていないため、これをどのようにトラッキングできるかわかりません。
私はこの情報がDOMを介して公開されているとは思わないです。
スティーブの答えからちょっと動いたかもしれないと思うのですが、コンテンツガイドのリンクを見れば、Handling Multi-Touch EventsとHandling Gesture Eventsというセクションがあります。
まだ試したことはありませんが、かなり有望です。 (
var zoom = document.documentElement.clientWidth/window.innerWidth;
:私はそれらをチェックアウトし、利用可能なデモのリンクを持っているしたら、私はあなたがズームインすると
、window.innerWidth
が調整されている...更新を提供しますが、document.documentElement.clientWidth
はそれゆえ、ではありません私はviewport
<meta>
なしでiOS4をテストしました。
しかし、私は何か重要なことはしません。モバイルブラウザーのDOMビューポートサイズ/ピクセルサイズare a complete mess。
私はこの方法(iOSの作品のみを)ズーム測定:
screenOrientedWidth = screen.width;
if (window.orientation == 90) {
screenOrientedWidth = screen.height;
}
return screenOrientedWidth/window.innerWidth;
それはコンテンツがどのように広いのは依存しません。
ただし、iOS Safari window.innerWidth
はgestureend
ハンドラ内で正しくありません。このような計算を後で実行するために延期する必要があります。 GWTではscheduleDeferred
を使用していますが、これを純粋なJavaScriptで実装する方法については言いません。
モバイル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;
}
唯一の問題は、ユーザーがズーム(ピンチを変更したことを検出するための整頓方法を見つけることです、ダブルタップなど)。オプション:
PS:Windowsの携帯電話は、( - Windows上でピンチズームはJavaScriptに表示されていないその自身別のビューポートを持ってピンチズームビューポートを変更しない)別のソリューションを必要とします。
google fastflip(http://fastflip.googlelabs.com/)それは可能ですので、確かに可能です – cobbal
アップデートが来ましたか? ;) – alex