モバイルブラウザの `` と `` で `overflow-x: hidden` が動作しないのはなぜですか?

「overflow-x:hidden」にもかかわらず、モバイル ブラウザでオーバーフローするコンテンツを解決する

ユーザーが「overflow-x:hidden」を適用する際に不可解な問題に遭遇しました。 「body」要素と「html」要素に「x:hidden」を追加しても、表示可能な領域を超えてコンテンツがオーバーフローするのを防ぐことができません

調べてみると、モバイル ブラウザはトップレベルのタグに適用されたオーバーフロー属性を無視し、「meta name="viewport" content=」で定義されたビューポート設定を無視しているようです。 ."' タグ。

解決策は、「body」内に包含要素を確立することにあります。

  <div>
<p> 'overflow-x:hidden' スタイルを 'body' や 'html' ではなく 'wrapper' div に設定すると、オーバーフローはラッパー内に制限され、ビューポートを超えて拡張されるのを防ぎます。</p>
<p> 「ラッパー」 div には追加の CSS プロパティが必要な場合があることに注意することが重要です:</p>
<pre class="brush:php;toolbar:false">#wrapper {
  position: relative;
}

この追加のスタイルにより、適切なスタイルが保証されます。ラッパー内のコンテンツの位置。これらの変更を実装すると、コンテンツが目的のビューポート内に適切に含まれ、モバイル ブラウザーの不要な空白が排除されます。