宽高比为16：9和4：3的画布是否有任何常见尺寸/纵横比为4：3时垂直居中画布

Question

我开发了一个1366x768的应用程序，宽高比为16：9，但在比例为4：3的ipad中，该应用程序没有完全显示窗口大小。底部有一些空间。我们无法适应窗户，因为它看起来很奇怪。

如何以4：3的比例而不是顶部垂直居中画布。我尝试使用css在jquery中垂直居中。

function sizeHandler()
{ 
    window.scrollTo(0, 1); 
    if (!$("#canvas")) 
    { return; } 
    var rw = CANVAS_WIDTH; 
    var rh = CANVAS_HEIGHT;
    var heightPercentage
    var w = window.innerWidth; 
    var h = window.innerHeight; 
    multiplier = Math.min((h / rh), (w / rw)); 
    var destW = rw * multiplier; 
    var destH = rh * multiplier;
    $("#canvas").css("width",destW+"px");
    $("#canvas").css("height",destH+"px");
    $("#canvas").css("left",((w / 2) - (destW / 2))+"px"); 

    var Ratio = Math.round(($(window).width() / $(window).height())*100)/100
    console.log("Ratio = "+Ratio)
    if (Ratio > 1.33 && Ratio <= 1.78) 
    {
          $("#canvas").css("-ms-transform","translateY(0%)"); 
          $("#canvas").css("transform","translateY(0%)"); 
          $("#canvas").css("top","0%");
          $("#canvas").css("padding-top","0%"); 
          $("#canvas").css("position","absolute");
     }
     if(Ratio <= 1.33) 
     {
          $("#canvas").css("-ms-transform","translateY(13.3%)");
          $("#canvas").css("transform","translateY(13.3%)"); 
          $("#canvas").css("top","50%"); $("#canvas").css("padding-top","0%"); $("#canvas").css("position","relative");
      }
};

我希望画布在纵横比为4：3时垂直居中，当它为16：9时，它将适合窗口。

Answer 1

您可以使用calc来计算CSS中元素的高度

canvas{
  width:90vw;
  height:calc(9 * 90vw / 16);
  background:#d9d9d9;
  position:absolute;
  margin:auto;
  top:0;bottom:0; left:0;right:0;
}

<canvas id="canvas"></canvas>