はじめに
いわゆるハイブリッドアプリ開発時に、ネイティブ実装した画面と組み合わせる際にレイアウトの値を指定するのに苦労したのでまとめました。
設定による違いは検証していないので検証次第追記しようと思います。
vhとは
Viewportの高さの1/100を1vhとする単位です。
Viewportを基準とする単位は他に「vw」「vmax」「vmin」があります。
変換します
画面全体にWebviewを表示している場合のvhは以下のように取得できます。
val displayMetrics = context.resources.displayMetrics //DisplayMetricsを取得
val statusBarHeight = 24 * displayMetrics.density //ステータスバーの高さ
val height = displayMetrics.heightPixels - statusBarHeight //Androidの画面の高さ
val deviceViewPortHeight = height / displayMetrics.density //デバイスのViewportの高さ
val px = deviceViewPortHeight / 100 //1vhあたりののピクセル値
DisplayMetrics.heightPixelsはステータスバーの高さも含まれるためステータスバーの高さ分引いてあげるのを忘れないように注意してください。
※ステータスバーの高さについて
また、Viewportの高さはdensityに依存しているようです。
はじめ、ディスプレイの高さに対して計算させると想定していたよりだいぶ大きくて焦りました。
もしかしたら、確認した環境との違いでうまくいかないかもしれません。
その場合は以下について考慮に入れて試してみてください。
- Webページ側のmetaタグでViewportのheightを設定していない
- Webviewの設定で「useWideViewPort」「loadWithOverviewMode」をtureにしている
まとめ
CSSの単位は色々あるので他のもpxに変換できるようにしておくと便利かもしれません。