モバイル端末で固定要素が表示されない問題の解決方法
この記事では、モバイル端末で固定要素が表示されない問題を解決する方法を紹介しますので、困っている方は参考にしていただければ幸いです。
過去数週間で会社のアプリ用にHTML5のネストされたページを作成しました。ページは複雑ではなく、下部にフッターがあります
HTMLの構造は次のとおりです
<style>
.main{
position: absolute;
top: 0;
bottom: 88px;
left: 0;
width: 100%;
overflow-y: auto;
}
footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
<style>
<body>
<div class="main">
...
</div>
<footer></footer>
</body>。コンテンツのデバッグが完了し、他のプロジェクトがいくつか挿入されました。その後、アプリ開発者からページのスクロールを監視するように言われ、位置決めレイアウトを使用しないように求められました。ページ上に入力用の場所がなく、固定要素が走り回ることがないことがわかります。そこでメイン部分を通常のレイアウトに変更しましたが、その後バグが発生しました:
Android ではすべて正常ですが、IOS10 では、ページに入るときにフッターが表示されず、ドラッグまたはダブルクリックした後にのみ表示されることがあります。 (他のバージョンの IOS テストでは、正常であると報告されています)
この問題が発生したときに最初に考えられるのは、フッターの Z インデックスを増やして 1000 に設定することですが、結果は役に立ちません。表示されないページの内容が非常に短く、フッターの位置に達していないことに注意してください。これは、ボディの高さに問題があると思われます。ボディにスタイルのデバッグを追加しました
background: #fafafa; min-height: 100vh;
。確かにページ全体が灰色になりましたが、フッターはまだ表示されません
同僚と話し合った結果、携帯電話のレンダリングに階層的な問題があるのではないかと推測しました。クリックまたはタッチ移動しても、最初はページが表示されませんでした。 -フッターをレンダリングしましたが、正常でした。
当時はほぼオンラインで問題なくバグを解決するために、フッターにtanslateZを設定しました
-webkit-transform: translateZ(1px) transform: translate(1px)
ページ上に弾性レイヤーもあります。 z-index が設定されており、フッターにはtranslateがあります。弾性レイヤーではカバーできません。これは、tranzlateZ レベルが高いことを示しています。弾性レイヤーをtranslateZ(2px)に設定すれば正常になります
この方法はあまりエレガントではありませんが、レイアウトが変更されず、緊急時にも適用できるという利点があります
おすすめ関連記事:
神聖CSSでの聖杯レイアウトと二重飛行翼レイアウトの紹介（コード付き）
CSSでフローティング要素の行折り返しを実装する方法以上がモバイル端末で固定要素が表示されない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1677
14
1431
52
1334
25
1280
29
1257
24
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
HTML、CSS、およびJavaScriptの理解：初心者向けガイド
Apr 12, 2025 am 12:02 AM
webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTML：構造、CSS：スタイル、JavaScript：動作
Apr 18, 2025 am 12:09 AM
Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
H5はHTML5と同じですか？
Apr 08, 2025 am 12:16 AM
「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。
H5は何を参照していますか？コンテキストの探索
Apr 12, 2025 am 12:03 AM
H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo
H5はHTML5の速記ですか？詳細の調査
Apr 14, 2025 am 12:05 AM
H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。
クラフトCMSのキャッシングの問題を解決する：Wiejeben/Craft-Laravel-Mixプラグインの使用
Apr 18, 2025 am 09:24 AM
CraftCMSを使用してWebサイトを開発する場合、特にCSSやJavaScriptファイルを頻繁に更新する場合、リソースファイルのキャッシュ問題が発生することがよくあります。古いバージョンのファイルがブラウザによってキャッシュされ、ユーザーが最新の変更を表示しないようにすることがあります。この問題は、ユーザーエクスペリエンスに影響を与えるだけでなく、開発とデバッグの難しさを高めます。最近、プロジェクトで同様のトラブルに遭遇し、いくつかの調査の後、プラグインWiejeben/Craft-Laravel-Mixが見つかりました。
