前述した通りですが、PCでは問題がないheight: 100vh;。スマホ閲覧時にのみ、アドレスバー（上）やメニューバー（下）分の高さが出てしまうという問題が発生します。

これはスマホの機種に依存する問題なので、解決法があるのか？ と思いましたが、jQueryのinnerHeight（ツールバーの高さを含まない）を用いることで解決ができるようです。

実装した例

See the Pen jQuery : innerHeight by Yurie (@kkrg) on CodePen.

実装方法

まずはhtmlとCSSです。構成はお好きなように。

<div id="mv"></div>

#mv {
    background: url(画像のURL） no-repeat center top / cover;
}

次にjQueryをinnerHeightを使って書いていきます。

<script>
$(function () {
    var h = $(window).height();
    var mv = $('#mv').innerHeight();
    if ( h > mv) {
        $('#mv').css('height' , h);
    }
});
</script>

header要素などをpositionで浮かせていれば良いのですが、ヘッダーがある場合、ヘッダーの高さ分やはり高さが出てしまいます。そんな時には、ヘッダーの高さ分を差し引いてあげると具合が良さそうです。

実装した例

See the Pen jQuery : innerHeight-hedder by Yurie (@kkrg) on CodePen.

実装方法

変わるのはjQueryの記述です。

<script>
$(function () {
    var h = $(window).height();
    var mv = $('#mv').innerHeight();
    var mv2 = h - 64; // 64（px）はヘッダーの高さ
    if ( h > mv) {
        $('#mv').css('height' , mv2);
    }
});
</script>