◆ モバイルだと開いた時点で全体が見えない
◆ Chrome だとスクロールすればタブエリアが縮んでちょうど全体が見える
  ◆ Android も
◆ Safari だと縮まない
  ◆ タブエリアを上にスワイプすれば手動で縮めれた

ページ全体の高さを 100vh にしたスクロールがないページをよく作るのですが このページを iOS でみると全体が画面に入ってませんでした

Chrome の場合は下にスクロールすると URL やタブのエリアが小さくなってちょうど画面全体二ページ全体が収まるようにになります
しかし Safari の場合はスクロールしてもタブエリアはそのままで下にスクロールされるので画面にページ全体が収まりません

いろいろ試してみると タブエリアを上にスワイプすればタブエリアが縮小されて Chrome のように画面にちょうど収まるようになりました
iOS ってほとんど操作が隠し機能みたいな知らないとできない操作なんですよね

Safari に対応するならタブエリアがあってもちょうど収まるように調整したほうがいいのでしょうか……
そもそも 私が iOS 使っても Chrome しか使わず Safari を全然使わないから知らないだけで Safari ユーザ的には当たり前なのかもしれません
調整するならタブエリアのサイズを求めて 100vh から引く とちょっと面倒です
iOS ユーザなら知ってるはず という前提で Chrome と同じで 100vh にするだけでいいなら楽なんですけどね

<!doctype html>

<style>
*{
box-sizing: border-box;
}

body {
margin: 0;
}

div {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}

header, footer {
height: 30px;
line-height: 30px;
color: white;
background: chocolate;
flex: none;
}

main {
flex: 1 0 0;
}
</style>

<div>
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>
</div>

ところで iOS と書いてますが iPadOS 13.3 で確認しています
この辺はどっちでも同じでしょうしね

それと Android の場合は iOS の Chrome と同じで 開いた状態では画面に収まってませんが 下にスクロールするとタブなどのエリアが隠れてページ全体が見えるようになりました
Android の場合はコンパクトなドメイン表示エリアすら隠れるので 僅かな差ですがページに使える領域が広いです