「overflow-x: hidden」がモバイル ブラウザで動作しないのはなぜですか? 水平オーバーフローを修正するにはどうすればよいですか?

モバイル ブラウザでの水平方向のオーバーフローの解消

Web サイトの本文に overflow-x:hidden を適用したにもかかわらず、モバイルではコンテンツがウィンドウの端を越えてオー​​バーフローし続けますブラウザ。たとえば、黒いメニュー バーはビューポートを超えて伸びており、不要な空白が作成されます。

問題の説明

overflow-x:hidden はデスクトップ ブラウザでの水平オーバーフローを制限しますが、ブラウザでは制限できません。モバイルデバイス。これにより、コンテンツが HTML タグや body タグの一部ではない領域にはみ出してしまいます。

を使用して特定のビューポート幅を設定します。ページは追加の空白によってその幅を超えて拡張されるため、タグも効果がないことがわかります。

解決策

この問題を解決する鍵は、サイト ラッパー

を作成することにあります。 内タグ。 の代わりに overflow-x:hidden をラッパーに適用することで、

どうやら、 を解釈するブラウザは、問題を回避できます。 tag は、HTML タグと body タグに適用されるオーバーフロー属性を無視します。したがって、ラッパー

をターゲットにします。

追加の考慮事項

場合によっては、ラッパー

を基準とした位置: を追加すると、適切なレンダリングを保証するために必要な場合があります。

以上が「overflow-x: hidden」がモバイル ブラウザで動作しないのはなぜですか? 水平オーバーフローを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。