タッチスクリーンズームで固定要素サイズを維持するにはどうすればよいですか?

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

固定要素がタッチスクリーン デバイスに表示されている場合、ズームインまたはズームアウトするとサイズが変更されることがあります。望ましくない動作を引き起こします。これにより、サイトのナビゲーションが中断されたり、コンテンツが重複したりする可能性があります。

この動作を防ぐ 1 つの方法は、CSS3 変換を使用して要素のスケールを動的に調整することです。スクロール イベントを監視することで、ズーム倍率を計算して要素に適用し、サイズの一貫性を保つことができます。

たとえば、次のコード スニペットはズーム倍率を計算し、それをスケール変換として適用します。

el.style["transform"] = "scale(" + window.innerWidth/document.documentElement.clientWidth + ")";

ただし、この調整だけでは不十分な場合があります。固定要素は、ページをズームしたモバイル Safari では動作が異なる傾向があります。これを補うために、スケーリングされた要素を高さ 100% の親要素内に絶対的に配置し、その位置を動的に調整できます。

overlay.style.left = window.pageXOffset + 'px';
overlay.style.bottom = document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px';

これらの手法を採用することで、タッチスクリーン デバイスでズームするときに固定要素のサイズが変更されるのを効果的に防ぐことができます。意図したサイズと可視性を確実に維持できるようにします。

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