質問: overflow-x:hiddenは、モバイルブラウザーでのコンテンツのオーバーフローを防止しません 私はウェブサイトを持っています こちら 。bodyにはoverflow-x:hiddenがあるため、デスクトップブラウザーで表示すると、黒いメニューバーはウィンドウのエッジにのみ適切に拡張されます。androidまたはiosを問わず、モバイルブラウザでは、黒いメニューバーに全幅が表示され、ページの右側に空白が表示されます。私が知る限り、この空白はhtmlまたはbodyタグの一部でもありません。<head>でビューポートを特定の幅に設定しても:<meta name="viewport" content="width=1100, initial-scale=1"> サイトは1100pxに拡張されますが、1100を超える空白はまだあります。私は何が欠けていますか?ビューポートを1100に保ち、オーバーフローを遮断するにはどうすればよいですか?
回答: @indigenuityが述べているように、これはブラウザが<meta name="viewport">タグを解析することによって引き起こされるようです。ソースでこの問題を解決するには、次を試してください。<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">。私のテストでは、これにより、ユーザーがズームアウトしてオーバーフローしたコンテンツを表示できなくなり、その結果、コンテンツのパン/スクロールもできなくなります。