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

Mary-Kate Olsen
リリース: 2024-10-30 12:07:27
オリジナル
1003 人が閲覧しました

 How Can You Maintain Fixed Element Size on Touchscreen Zoom?

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

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!