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

タッチスクリーン デバイスでズームする際の固定要素のサイズ変更の問題を修正する方法

Web 開発では、一貫性を維持することが不可欠です。ユーザーのインタラクションに関係なく、要素が表示されます。ただし、タッチスクリーンで固定要素を操作する場合、ズームすると予期しないサイズ変更の問題が発生する可能性があります。

次のコード スニペットを検討してください:

<code class="html"><div id="fixed">
  <p>Some content</p>
</div></code>

<code class="css">#fixed {
  height: 150px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}</code>

タッチスクリーンで、ユーザーがピンチしてズームインしたとき、固定要素は残りのコンテンツとともにスケールアップします。ただし、過度にズームすると、要素が大きくなりすぎて他のコンテンツと重なる可能性があります。この問題に対処するには、ズーム イベント中に固定要素のサイズが変更されないようにする必要があります。

解決策は、ユーザーのズーム レベルに基づいて要素のスケールと位置を再計算することです。これは、スクロール イベント中に要素の CSS 変換と位置を継続的に更新することで実現できます。

<code class="javascript">window.addEventListener('scroll', function(e) {
  // Calculate the zoom factor.
  var zoom = window.innerWidth / document.documentElement.clientWidth;

  // Apply the zoom factor as a CSS3 transform.
  el.style["transform"] = "scale(" + zoom + ")";
});</code>

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

このアプローチでは、ズームに関係なく、要素を効果的に元のサイズに戻し、それに応じて位置を調整します。レベル。

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