Overflow-x:hidden がモバイル ブラウザ上のコンテンツを制限しない
overflow-x:hidden スタイル属性を実装して、コンテンツをモバイル ブラウザに制限する場合ビューポートの幅を大きくすると、モバイル ブラウザで予期しないオーバーフロー動作が発生する可能性があります。問題の内訳と解決策は次のとおりです。
問題の説明:
body タグまたは HTML タグで overflow-x:hidden を設定しているにもかかわらず、モバイル ブラウザでは次の内容を超えたコンテンツが表示されます。指定されたビューポートの幅により、右側に空白が生じます。 page.
理由:
モバイル ブラウザでは、html 要素と body 要素に適用される overflow-x:hidden が無視されることが多いことが観察されています。代わりに、ビューポートのメタ タグを解析するときにこれらの属性が無視されるように見えます。
解決策:
この問題を解決するには、body タグ内にラッパー div を作成し、 overflow-x:hidden スタイルを本体の代わりに that ラッパーに追加する、またはhtml.
次のコード サンプルを検討してください:
<body>
<div>#wrapper {
overflow-x: hidden;
}追加の注意:
場合によっては、次のことも必要になる場合があります。適切なレイアウトを確保するために、ラッパー div に相対的な位置を追加します。
適用することによりoverflow-x:hidden をラッパー要素に追加すると、その div 内のコンテンツを html 要素と body 要素のモバイル ブラウザーの制限から効果的に分離できます。これにより、コンテンツを目的のビューポート幅に制限し、右側の不要な空白を排除できます。
以上が「overflow-x: hidden」がモバイル ブラウザで動作しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
