[解決済み] Overflow-x:hiddenはモバイルブラウザでコンテンツのはみ出しを防止しない

2022-04-23 19:52:30

質問

私はウェブサイトを持っているここで .

デスクトップ・ブラウザーで見た場合、黒いメニューバーはウィンドウの端までしか表示されません。 body は overflow-x:hidden .

AndroidでもiOSでも、どのモバイルブラウザでも、黒いメニューバーが幅いっぱいに表示されるため、ページの右側に空白が生じます。私の知る限り、このホワイトスペースは html または body タグを使用します。

でビューポートを指定した幅に設定しても <head> :

<meta name="viewport" content="width=1100, initial-scale=1">

1100pxに拡大しても、1100pxの先には空白が残ります。

何を見落としているのだろう？ビューポートを1100に抑え、オーバーフローをカットするには？

の中にサイトラッパーdivを作成する。 <body> を適用し overflow-x:hidden になります。 うわびょうし の代わりに <body> または <html> は問題を修正しました。

をパースするブラウザがあるようです。 <meta name="viewport"> タグは単に無視する overflow 属性があります。 html と body タグを使用します。

注：この他に position: relative をラッパーの div に追加します。