4

デスクトップ ブラウザーで HTML ページをズームすると、固定位置の div はページの残りの部分と同様に拡大縮小され、ビューポートに対して固定された位置を維持します。これは、以前は Chrome モバイル ブラウザーでも同様でした (バージョン 39 ではまだそのように動作していました) が、Chrome for mobile 40 では、モバイル用 Safari と同様の動作を開始し、ページが拡大縮小されると、固定要素は拡大縮小された要素に固定されます。ページが 100% ズームの場合に配置される位置にドキュメントを配置します (いくつかの注意事項があります)。

これは、position:fixed の div を含むページです http://betterstatistics.org/tests/fixedpos

モバイルの場合、ズームに従ってdivをスケーリングし、position:fixedプロパティを保持して、スクロール時に位置を変更する必要がないように、ズームに従って位置を設定したいと思います。

これが私の試みです: http://betterstatistics.org/tests/fixedpos/attempt001.html (モバイルのみ)

関連する行:

orig_w = 300;
orig_h = 100;
document.body.addEventListener('touchend', repositionDiv);

function repositionDiv(){
  var zoom = getZoom();
  var d1 = document.getElementById("div_br");
  var w = (orig_w / zoom);
  var h = (orig_h / zoom);
  d1.style.width = w + 'px';
  d1.style.height = h + 'px';
  d1.style.left = (window.scrollX + window.innerWidth - d1.offsetWidth) +'px';
  d1.style.top = (window.innerHeight - d1.offsetHeight) +'px';
}

function getZoom(){
  return document.documentElement.clientWidth / window.innerWidth;
}

モバイル用の Android Chrome でほぼ動作しますが、スクロール後に高さの位置を正しく取得できませんでした。次のことも試しました。

d1.style.top = (window.scrollY + window.innerHeight - d1.offsetHeight) +'px';

と：

d1.style.top = (window.scrollY / zoom + window.innerHeight - d1.offsetHeight) +'px';

同様の質問がいくつかあることは知っていますが、ほとんどがJQueryであり、解決策のあるものは見当たりませんでした。それらは主にiOSに関するものでしたが、今のところAndroid Chromeにもっと興味があります.

4

1 に答える 1