タッチスクリーンのズーム中に固定要素のサイズが変更されないようにするにはどうすればよいですか?

タッチスクリーンのズーム中に固定要素のサイズを維持する

タッチスクリーンを備えたモバイルデバイスでは、Web ページ上の固定要素に特有の課題が生じます。ユーザーが画面をピンチしてズームインすると、固定要素はコンテンツの残りの部分とともにサイズ変更される傾向があり、基礎となる要素が見えにくくなる可能性があります。

この動作を防ぐには、現在のズーム率を計算する手法を採用し、適切な CSS3 変換を固定要素に適用し、常に同じサイズを維持します。

<code class="javascript">window.addEventListener('scroll', function(e) {
    var zoom = window.innerWidth / document.documentElement.clientWidth;
    el.style["transform"] = "scale(" + zoom + ")";
});</code>

このロジックはズーム率を計算し、それをスケール変換として適用します。ただし、固定要素の位置は不正確になる可能性があるため、絶対位置を使用して調整します。

<code class="javascript">el.style.left = window.pageXOffset + 'px';
el.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';</code>

コンテンツの高さ 100% の親要素内に固定要素を配置し、ビューポートの寸法に基づいて位置を調整することで、位置が維持されるようにします。ズーム レベルに関係なく、希望の位置に表示されます。

固定要素のスケーリング アンカー ポイントを制御する必要がある場合は、transform-origin プロパティに注意してください。この手法を利用すると、タッチスクリーンのズーム イベント中にサイズを維持する要素を作成でき、モバイル デバイスでのユーザー エクスペリエンスが向上します。

以上がタッチスクリーンのズーム中に固定要素のサイズが変更されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。