Position:Fixed がモバイルブラウザで機能しないのはなぜですか?どうすれば修正できますか?

モバイル ブラウザーで固定位置が機能しない

背景

Web 開発者は、モバイル ブラウザー内で要素を固定して配置しようとすると、課題に遭遇することがよくあります。 CSS プロパティのposition:fixedを使用すると、周囲のコンテンツがスクロールしても要素の位置を維持できます。ただし、この機能は、iOS および Android の古いバージョンでは歴史的に問題がありました。

問題

iOS バージョン 5 より前のバージョンや Android バージョン 4 より前のモバイル ブラウザでは、次の位置が修正されました。財産の故障。このプロパティが割り当てられた要素は引き続きページ コンテンツとともにスクロールするため、意図した「固定」位置効果が無効になります。

解決策

この問題に対処するために、経験豊富な開発者が一貫して機能する実用的なソリューションを考案しました。複数のモバイル ブラウザーの場合:

-webkit-backface-visibility の使用: hidden;

この問題を解決する鍵は、CSS プロパティ -webkit-backface-visibility にあります。これを非表示に設定すると、基本的にブラウザが要素の前面のファサードを維持するように強制します。これにより、隠蔽されたり、基礎となるコンテンツの影響を受けたりすることがなくなり、画面上で確実に「固定」された状態になります。

例

このソリューションの実際の動作を説明するために、次のコード スニペットを考えてみましょう。

<code class="css">.fixed {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 50px;
  background: red;
  -webkit-backface-visibility: hidden; /* Most Important */
}</code>

<code class="html"><div class="fixed">
  Hi I'm Position Fixed
</div></code>

このコードを Web ページに適用すると、位置が固定された赤い四角形が作成されます。ページがスクロールされても、画面上の同じ場所に残ります。

注: このソリューションは主に iOS および Android デバイスの問題を解決するものであることに言及する価値があります。他のブラウザの場合は、別のアプローチが必要になる場合があります。

以上がPosition:Fixed がモバイルブラウザで機能しないのはなぜですか?どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。