【CSS】スマホ（実機）で見た時にline-heightが効いていない。

<head>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
    <h1 class="title">
        <span>テキスト</span><br><span>テキスト</span>
    </h1>
</body>

// CSS
.title {
    font-size: 9vw;
    /* 追加2 */
    line-height: 15vw;
    font-family: 'メイリオ';
}

.title span {
    color: #fff;
    padding-left: 2vw;
    padding-right: 2.25vw;
    padding-bottom: 1vw;
    background: linear-gradient(90deg, rgba(94,98,144,1) 0%, rgba(36,38,69,1) 83%);
}

【やりたいこと】
背景色付きのタイトル（２行）
行間に隙間があり、レスポンシブ

【質問】
画面サイズに左右されたくないのでline-heightにvwを使用しています。
これによってタイトル１行目と２行目の間に隙間を作りました。
Chromeのデベロッパーツール上では問題なかったのですが、実機（アンドロイド）で見ると正しく反映されていません。
vwが非対応という事でしょうか。
line-heightには1.8（この小数点単位がベストだったので）を指定してみたりもしましたが、実機でみると正しく反映されていませんでした（小数点が繰り上がり値が2になっている）

このような場合、どう解決すればいいか教えていただけますでしょうか。
よろしくお願いいたします。