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

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

DDD

リリース： 2024-10-30 16:53:02

オリジナル

329 人が閲覧しました

How to Prevent Fixed Element Resizing During Touchscreen Zooming?

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

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 サイトの他の関連記事を参照してください。