Существуют ли общие размеры для холста с соотношением сторон 16: 9 и 4: 3 / Вертикальное центрирование холста при соотношении сторон 4: 3 - PullRequest
Новая
       20

Существуют ли общие размеры для холста с соотношением сторон 16: 9 и 4: 3 / Вертикальное центрирование холста при соотношении сторон 4: 3

0 голосов
/ 24 апреля 2019

Я разработал приложение с разрешением 1366x768 с соотношением сторон 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 && 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, оно будет соответствовать окну.

1 Ответ

0 голосов
/ 24 апреля 2019

Вы можете использовать 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>
...