コンテンツが少ない際に、フッターの下に不自然な空白が発生してしまうので下記のサイトを参考に実装してみました
フッターをページの最下部に固定
<body>
<header>ヘッダー</header>
<main>コンテンツ</main>
<footer>フッター</footer>
</body>
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
flex: 1;
}
すると、PCの検証ツールでスマホ版のサイトを表示したらフッターが一番下に来ますが、
スマホでサイトを開いてみると、一番下にフッターが固定されず、フッターの下に不自然な余白が出来ていました。
AndroidやiPhone、SafariやChrome, Firefoxで試してみても同様の現象が確認できました。
この画像はM1 Macbook Air(Chrome), OPPO Reno A(Chrome)で表示させたものです。
対処法
CSSを下記のように修正
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
/*修正箇所*/
footer{
margin-top: auto;
}
Flexboxとmargin: auto;の組み合わせで、Flexアイテムに自動マージンを適用すると、
そのマージンは適用される方向に応じて、Flexコンテナ内の余分なスペースを占有するように
自動的に拡張されます。
なので、margin-top: auto;をfooterにあてることでコンテンツが少ない場合、
footerの上に自動で余白が作成され、footerが一番下に表示されるという仕組みです。
最初のflex: 1;も自動で余白を作成するので役割は変わりません。
まとめ
直接的な問題点はわかりませんでしたが、「flexbox スマホ 不具合」で検索したところ
バグが多いという記事がいくつか出てきましたので、その影響はあるかも知れません。
原因がわからない場合は、やり方を変えてみるのが大事ですね。
もし、原因がわかる方がいらっしゃれば、教えていただけると幸いです。
参考サイト
フッターをページの最下部に固定
CSSでfooterを固定する方法３つを解説！【初心者向け】
CSS Flexboxとmargin: auto;の自動マージンがどのように相互作用するか、両端揃え・右寄せの実装テクニック