electron用、windowサイズにコンテンツをフィットさせるjs

window_controll.js

function setFrameSize () {
    
    var container = document.querySelector('body')

    // windowのサイズ
    var windowHeight = window.innerHeight
    var windowWidth = window.innerWidth

    // windowの高さ/幅比
    var windowRatio = windowHeight/ windowWidth
  
    // 画面のデフォルトサイズ
    var canvasDefaultWidth = 1920
    var canvasDefaultHeight = 1080
  
    // 画面の高さ/幅比
    var canvasRatio = canvasDefaultHeight / canvasDefaultWidth
  
    // 幅の拡縮比
    var widthScaleRatio = (windowWidth / canvasDefaultWidth)
    
    // 高さの拡縮比
    var heightScaleRatio = (windowHeight / canvasDefaultHeight)

    //　画面比が縦長の時
    if (windowRatio > canvasRatio) {
      // 幅比を基準に拡縮
      container.style.transform = 'scale(' + widthScaleRatio + ')'
      //container.style.zoom = widthScaleRatio;//こっちでもいいと思われる
      
      container.style.transformOrigin = 'top left'
      container.style.marginLeft = "inherit"
      container.style.marginRight = "inherit"

      var offset = (windowHeight - canvasDefaultHeight * widthScaleRatio) / 2;
      container.style.marginTop = offset + "px"
    
    } else {
     
      container.style.transform = 'scale(' + heightScaleRatio + ')'
      //container.style.zoom = heightScaleRatio;//こっちでもいいと思われる
      
      container.style.transformOrigin = 'top left'
      container.style.marginLeft = "inherit"
      container.style.marginRight = "inherit"

      var offset = (windowWidth - canvasDefaultWidth * heightScaleRatio) / 2;
      container.style.marginLeft = offset + "px"

    }
  
    container.style.visibility = "visible";
  }
  window.addEventListener('load', setFrameSize)
  window.addEventListener('resize', setFrameSize)