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

タッチスクリーンのズーム中の要素のサイズ変更の防止

Web 開発の領域では、固定要素は重要なコンテンツのアンカーとなり、コンテンツの中で静止したままになります。スクロールモーション。ただし、タッチスクリーン デバイスで表示すると、これらの要素がピンチでズームするジェスチャに負けて、他のコンテンツと一緒に誤って拡大されてしまうことがよくあります。

このジレンマに対処するには、ズーム中に特定の要素のサイズが変更されないようにすることが重要です。元の寸法を維持しながら。これを実現する方法は次のとおりです:

ズーム係数を再計算し、変換を適用します:

1. ユーザー インタラクションを追跡するスクロール イベント リスナーを実装します。
2. innerWidth と clientWidth の比率を使用してズーム率を計算します。この値はズームの範囲を表します。
3. 対象の要素の CSS プロパティ「transform」を「scale(zoomFactor)」に設定します。これにより、ブラウザのズームに対抗するために要素が再スケールされます。

要素の位置の調整:

1. ズームにより要素の位置が変更されるため、その " left" プロパティと "bottom" プロパティを設定する必要があります。

2. たとえば、高さ 100% の親内に絶対的に配置された要素の場合は、次の値を使用します:

   • " left": window.pageXOffset 'px'
   • "bottom": document.documentElement.clientHeight - (window.pageYOffset window.innerHeight) 'px'

Transform-Origin を検討します:

1. 「transform-origin」プロパティは、スケーリングのアンカー ポイントを決定します。
2. 目的の位置合わせを達成するために、さまざまな値を試してください。

これらの手順を実装すると、ズーム中に固定要素のサイズが変更されるのを効果的に防ぎ、最適なユーザー エクスペリエンスと視覚的に一貫した Web アプリケーションを確保できます。

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