AndroidのWebViewでは、html,boyに100%を指定すると0になる

先日から悩んでいましたが、解決しました。

AndroidのWebViewで、要素のclientheightの値が０


firefox、chromeなど、ブラウザで見ると問題がないサイトを、AndroidのWebViewで見ると、レイアウトが崩れてしまいました。

原因は、cssに、このような記述をしていたためのようです。
html{
  width: 100vw;
  height: 100vh;
}

body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

WebViewでは、heightの100vhや100%を指定すると、0pxになるようです。
バグではないかと思いますが、私の使い方に問題があるのかも知れません。

この影響で、body内の、divなどに、height:100%と指定すると、高さが０になり、表示されません。

対策として、jsに、次の記述を書きました。

アンドロイドの場合、スタイルの高さをpxで指定する。
var ua = window.navigator.userAgent.toLowerCase();
if (ua.search(/android/) !== -1) {
      var html = document.querySelector("html");
      html.style.height = html.clientHeight + "px";
      var body = document.querySelector("body");
      body.style.height = html.clientHeight + "px";
}

サイト側に改良を加えるという点が、いまひとつのため、もう少し調べます。

アプリのレイアウトにおいて、
WebViewの記述をwrap_contentから、match_parentに変えることで、解決しました。

android:layout_height="match_parent"

jsの記述は不要でした。

結局、バグではなく、私の設定ミスでした。