javascript - 宽高比为16:9和4:3的 Canvas 是否有通用尺寸/当宽高比为4:3时垂直居中

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

我如何垂直将画布居中放置为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时将垂直居中，以适合窗口。

最佳答案

您可以使用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>

关于javascript - 宽高比为16:9和4:3的 Canvas 是否有通用尺寸/当宽高比为4:3时垂直居中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55825189/