Блог

Я разработал приложение с разрешением 1366×768 с соотношением сторон 16: 9, но в 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 amp;amp; 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>