前回に引き続き、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対応時のポイントとして紹介できる内容があれば、投稿していきたいと思います。
SQLが学べる 関連連載リンク
データベースの基礎が学べるSQL基礎講座
SQL基礎 連載
練習問題を通じてSQL理解度アップの人気連載！
SQL練習問題集
