【Cordova】WKWebView対応でハマった話 ②画面下部の空白


前回に引き続き、CordovaでWKWebView対応時に発生した不具合と、
その対処方法を紹介します。


■画面下部に不具合

こちらは必ず目につく不具合で、WKWebView対応によって画面下部に空白が生まれました。
UIWebView時の元々の表示と、WKWebView対応後の不具合時の画像を以下に並べます。

↓ 正しい表示(UIWebView時)

↓ 不具合表示(WKWebView対応時)

ページ下部と言えばセーフエリア対応をした記憶があったので、
始め「Cordova」「WKWebView」「safe-area」みたいなキーワードで検索をして、以下のページがヒットしました。
Content dimensions incorrect at startup on iPhone X

英語だし全て読むのは面倒だけど、症状的には同じっぽい・・と思って流し読みしていたら、
bodyに「height: 100vh」を指定すると上手く行くケースがあるとのことで試してみると、
幸いにもこれが上手く行きました!
念のため、元々の記述と併せて以下にまとめます。(対象箇所のみ抜粋)

対処方法

<元々のCSS>
body {
  height: 100%;
}

<変更後のCSS>
body {
  height: 100vh;
}

ここで変更した%とvhの違いですが、
%指定の場合には親要素の高さを基準にしているのに対して、
vh指定ではビューポートの高さを基準にしています。

WKWebViewに変更したことでhtmlやbody要素の対象範囲が画面全体からズレてしまい、
%指定ではその影響を受けて空白エリアが生まれてしまった、ということのようです。

一方で、ビューポートはmetaタグによってデバイスの画面全体を指定していたため、
vh指定によって元々の表示にすることができた形となります。

 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover">

当初セーフエリア関連の不具合かと思いましたが、結果的にビューポート対応の不備であったと言えそうです。


これも元々vh指定で対応していれば問題無かった不具合ですが、
今回のケースと同様に%指定をしていた場合には起こりうる不具合かと思います。

他にもWKWebView対応時のポイントとして紹介できる内容があれば、投稿していきたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP