この回答のデモ この回答
に基づいて作成したダイアログウィジェットライブラリ。
ダイアログ ウィジェットのデモモバイルで試して、ズームしてリンクをタップしてください。
ジェスチャー イベントは何かの倍率に関するメタデータを保持しているように見えますが、制御して手動で見つけたほうがよいかもしれません。ユーザーがライブで動き回っている間も効果を維持したいので、スクロール イベントごとに再計算する必要があります。
window.addEventListener('scroll', function(e){ /* coming next */ })
ズーム倍率を計算し、CSS3 変換として再スケーリングされた要素に適用します。
el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";
これにより、要素は現在のビューポートのズームに対してズーム 1 の比率に再スケーリングされますが、ページ上にまだ正しく配置されていない可能性があります。これは、その位置の新しい値を取得する必要があることを意味します。画面上で実際に何が起こるかは、要素の CSS 位置の値に依存し、特にモバイル Safari とはfixed
異なる動作をします。ページがズームされている間、位置が滑らかになる効果が追加されるため、この原因に対していくつかの不便な問題が発生します。目的のスケーリングされた要素の親として 100% のコンテンツの高さ要素を持ち、スクリプトで要素を親の内側に配置します。この例のデモでは、次の値が機能します。absolute
fixed
relative
absolute
overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';
スケーリングを有効にするアンカーポイントに応じて、CSS プロパティの使用にも注意を払う必要がありtransform-origin
ます。これは配置に直接影響します。