ホームページ > ウェブフロントエンド > CSSチュートリアル > タッチスクリーンのズーム中に要素のサイズが固定的に変更されないようにするにはどうすればよいですか?

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート