ビューポート比率でのフェードイン/アウト

Question

このコンセプトのいくつかの必要な部分のため、ビューポートレートは> = 1：1である必要がありますが、< = 2：1です。

1：1と2：1の間の値ではない場合、divコンテナーがフェードインする必要があります。そこにテキストメッセージがあります。 しかし、ビューポート比率が適合値に修正されると、自動的にフェードアウトされます。

このチェックは、ページがロードされているときだけでなく、Viewportディメンションが変更されるたびに発生します。

誰かが私にこの問題を教えてもらえますか？

Answer 1

このJSfiddleをチェックアウト：https://jsfiddle.net/ChefGabe/e1vfhyuw/ （ページ・サイズ変更をシミュレートするために、出力ウィンドウのサイズを変更することができます）

1行目と2行目は、イベントリスナーです。 DOMContentLoadedは、ページの読み込み時にHTMLが解析された後に発生します。 resizeはresize（duh）で起動されます。

（編集：DOMContentLoadedはJSfiddleでは動作しませんが、それは現実のシナリオで動作するはずです）

私は、ブラウザの幅と高さを取得するためにthis StackOverflow questionを使用。

Answer 2

、ウィンドウのサイズを確認windowオブジェクトによって発射onresizeイベントに耳を傾け、resizeイベントは、短い間隔で複数回発射できるので、一定の時間が経過した後にそれが唯一のコールバックを実行するのが最善であるために、したがって、throttle()関数

function throttle(interval, fn) { 
    var inProgress; 
    return function() { 
    if (inProgress) { 
     clearTimeout(inProgress); 
    } 
    else { 
     inProgress = setTimeout(fn, interval); 
    } 
    } 
} 

var onResize = throttle(500, function() { 
    if ((screen.availWidth/screen.availHeight) <= 2) 
    fadeIn(); 
    else 
    fadeOut(); 
}); 
window.addEventListener('resize', onResize, false); 

Answer 3

これには実際にはJavaScriptは必要ありません。純粋なCSS media queryでこれを解決することをおすすめします。そこaspect ratioための一つですので、我々は

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { ... } 

のようなものを使用したいとクエリ内で使用すると、そのメッセージの可視性をトリガすることができます。

@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 2/1) { 
    .ratio-message { 
     /* Whatever custom animation to reveal the message like opacity or display */ 
     transform: translateX(0); 
    } 
} 

そしてjsfiddle上の例。