モバイルブラウザのVuejs：100vh

Question

私はmin-height: 100vh のページを持っています。モバイルブラウザでは、いくつかのオーバーフローが発生してレンダリングされます。そして、私はそれを修正するために、このスクリプトを使用します。

methods: { 
    calcVH() { 
     const vH = Math.max(document.documentElement.clientHeight, window.innerHeight, window.screen.height || 0) 
     document.getElementById('app').style.height = vH + 'px'; 
    } 
    }, 
    mounted() { 
    this.calcVH(); 
    window.addEventListener('onorientationchange', this.calcVH, true); 
    window.addEventListener('resize', this.calcVH, true); 
    } 

それはエミュレータで[OK]を動作しますが、それはクローム/サファリモバイル上では動作しません。 誰も同じ問題がありましたか？

Answer 1

はい、私はvhを使用して同様の問題がありました。それはknown problemです。

このような種類のハッキングを回避するため、携帯電話とタブレットでvhの使用を中止することをお勧めします。代わりに古典的な相対値%（パーセンテージ）の値を使用してください。 vhを%に置き換えたので、私は携帯電話にこのような問題はありませんが、もう少し実装が必要です。 %を使用することは、すべての場合において単純ではありませんが、同じ予測可能な方法でどこでもきわめてうまく動作するソリューションが得られていることから、あなたは元金を返済します。