javascript - 縦向きを使用している場合、iOS7 で Modernizr.cssvhunit が機能しないのはなぜですか?

Question

Modernizr を使用して、ブラウザーでビューポートユニットがサポートされているかどうかを検出しようとしています。

これが私のテストです：

if(!Modernizr.cssvhunit) {
    alert('viewport units are not supported');
}

ビューポートユニットが iOS7 でサポートされていないことは承知しているため、ここでフォールバックが必要になります。

横向きの iPad で iOS7 のページを読み込むと、アラートが実行されます。

ただし、ページを縦向きで読み込むと、アラートは表示されません。

条件が風景でのみ機能するのはなぜですか? これは Modernizr の既知のバグですか?

score 0 · Accepted Answer

答えはありませんが、別の解決策を見つけました。

cssvmaxunit のテストを追加したところ、ポートレートとランドスケープの両方で条件が機能します。

// if viewport units aren't supported
if(!Modernizr.cssvhunit || !Modernizr.cssvmaxunit) {
    alert('viewport units are not supported');
}

ブラウザがをサポートしていない場合は、サポートvmaxしていない可能性が高いと思いvhます。

score 0 · Accepted Answer

iOS7 ではビューポート単位に問題がありました。特にビューポートの高さ。CanIUse.com には、このバグのある動作もリストされています。

iOS7 で部分的にサポートされているのは、「vh」ユニットの動作にバグがあるためです (回避策を参照してください)。

iOS8 はビューポートユニットを完全にサポートしていますが、modernizr にはバグが報告されています。Modernizr によると、iOS8 Safari は vhunits をサポートしていますが、サポートしていません。しかし、現在これを修正するには問題があるようです。

score 0 · Accepted Answer

私自身も同じ問題を抱えていましたが、この記事を見つけて、良い解決策を見つけました。サポートのこの奇妙な中間点を検出し、クラスを html に配置する小さなスクリプトがあります。Modernizr とまったく同じように動作します

3 に答える 3