jQuery 뷰포트 종횡비

Question

SCREEEN 또는 뷰포트의 종횡비 추적을위한 수식을 찾고 있습니다 (어떤 가이드가 있는지 알고 있다면, 필자는 필요하지 않은 새 코드가 필요하지는 않습니다). 그러나 지금까지는 관련 주제 또는 온라인 계산기 크기 조정 중 일부 이미지 만 찾음 ...)

문제의 핵심은 ... 저는 비디오 (mp4)를 가지고 있는데, 이는 배경과 같습니다. 이제 전체 화면을 덮을 비디오가 필요합니다. 비디오에 가로 세로 비율이 있고 화면 가로 세로 비율이 있다는 것을 알고 있으므로 일부 모니터에서는 일부 가장자리가 잘릴 것입니다.

하지만 스타일 변경해야 할 몇 가지 제한이있다 :

까지 16은 : - 9 (16)에서 스타일 1

를 사용하여 : 8,99 넓은 - 당신도 알다시피, 넓은 여분의 그 같은 곡선 모니터, 나는 다른 스타일링이 필요해.

---

그래서 - 확인하는 방법, 화면 비율은 더 넓게 경우 16 이상 : 9?

지금까지 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(); 
} 

그래서, 어떤 조언, 솔루션의 코드가? 나는 매우 위대 할 것이다 :) 고마워.

Answer 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} 
}