jQuery 视口纵横比答案

【问题标题】：jQuery viewport aspect ratiojQuery 视口纵横比
【发布时间】：2016-12-20 00:42:05
【问题描述】：

我正在寻找一个用于跟踪屏幕或视口纵横比的公式（如果您知道任何指南，您可以链接我，不需要新的代码:)，但到目前为止我只找到了一些图像调整相关主题或在线计算器的大小...）

所以问题的核心... 我有一个视频（mp4），就像某种背景。现在，我需要视频覆盖整个屏幕。我知道视频有一定的纵横比，屏幕也有一定的纵横比，所以我可以接受，在某些显示器上，一些边缘会被剪掉。

但是有一些限制，我需要更改样式：

高达 16:9 - 使用样式 1

从 16:8,99 和更宽的角度 - 你知道，就像那些超宽曲面显示器一样，我需要不同的样式。

那么 - 如何检查宽高比是否比 16:9ANY WIDER？

到目前为止，我尝试使用此主题中的 GDC（已接受的答案），但我无法使其正常工作（因为每个分辨率都有不同的 GDC，我无法与 16:9 进行比较）Whats the algorithm to calculate aspect ratio? I need an output like: 4:3, 16:9

所以，对于决赛，有代码

function ratiocompare(width, height){
//this I need to create
//sth like 

//if(aspect ratio is any wider than 16:9){return true;}
//else{return false;}
}

function checkratio(){

       var compare = ratiocompare($(window).width(), $(window).width());

       if(compare)
        {  $("#video").css("width","100%");
           $("#video").css("height","auto");
           $("#video").css("left","0");
           $("#video").css("top","50%");
           $("#video").css("transform","translate(0, -50%)");
        }

       else{
           $("#video").css("width","auto");
           $("#video").css("height","130vh");
           $("#video").css("left","50%");
           $("#video").css("top","0%");
           $("#video").css("transform","translate(-50%, 0)");
        }
}

$(document).ready(function() {
 checkratio();
}

那么，有什么提示和解决方案吗？我会非常感激 :) 谢谢。

【问题讨论】：

标签： jquery screen-resolution aspect-ratio

【解决方案1】：

好的，解决方案来自一个数学论坛：除以比率的数字。我们得到的数字是我们可以与其他纵横比进行比较的数字...

像 16:9 -> 16/9 = 1.77777777 任何高于 1.77777777 的数字都表示，纵横比大于 16:9。

在 jquery 中：

function gcd(x, y){
    if (y == 0){ return x; }
    return gcd (y, x % y); 
}

function check(){
 var ratio = gcd($( window ).width(), $( window ).height());
 var testratio =  ($( window ).width()/ratio)/($( window ).height()/ratio);

if(testratio>1.7777777{//screen is wider than 16:9, do something}
}

【讨论】：