【cordova】vh, vw のバグ (android, ios 両方あり)

vh, vw は使わないほうがよさそうです

vh, vw は親要素に依存せずに、常に画面サイズを基準にしたサイズを返してくれます。

css

/* viewport = 320 なら、親要素に依存せずに width=160px */
width : 50vw;

特に、デザインを１画面に納めたい（縦にスライドさせたくない）時には、vhは大変便利そうです。しかし残念ながら ios, androidともにうまく動作しない場合があります。

##iosでvhが崩れる
インプット要素に文字を入力する際にはソフトウェアキーボードが表示されますが、これにより画面の高さが変化したとみなされてしまい、vhを使った要素のデザインが崩れてしまいます。

##android は width : xx% ですら崩れる機種あり
androidでは、device-pixel-ratioを考慮せずに、画面の解像度を基準に計算されてしまう場合があります。私が確認したものでは、width : xx% が倍のサイズで計算されてしまう機種がありました（昔の普段使いのメイン機種）。でもcrosswalkでビルドすれば大丈夫です。

解決策

%を使ったデザインは不安なので、jsでサイズを計算するのが確実です。
もしvh, vwが確実に動作する日が待ち遠しいです。
*コードは次回