ローディング画面の縦中央にロゴを表示するレイアウトをコーディングし、
iPhone Safariで表示しました。

何故か下にズレる・・・。

画面の高さ100%ってどういう風に指定する？

上記のレイアウトを組んだ時のHTMLとSASSです。

<div class="keyvisual">
   <div class="keyvisual__logo">
       <img src="img/pc/logo.png" alt="signal">
   </div>
</div>

.keyvisual {
   position: relative;
   width: 100%;
   height: 100vh;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   &__logo {
       padding: 10px;
       background-color: #fff;
   }
}

調べてみると・・・
iOS Safari、Android Chrome >= 56 では、「vh」はアドレスバーの高さを含んで計算されます。
そのため、アドレスバーの高さ分、ロゴが中央から下にズレて表示されていました。

解決策

ローディング画面なので、JavaScriptで画面の高さを計算し表示すると一瞬遅くなります。

親要素から画面の高さを引き継ぐ

html, body {
   width: 100%;
   height: 100%;
}

.keyvisual {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   align-content: center;
   align-items: center;
   justify-content: center;
   &__logo {
       padding: 10px;
       background-color: #fff;
   }
}

Nuxt.jsの場合

html, body, #__nuxt, #__layout, #__layout > div {
   width: 100%;
   height: 100%;
}