Проблема с размером iFrame для мобильных устройств (iOS)

Question

Я сделал пользовательскую Shopify корзину для карусели, и она размещена на моем Shopify здесь и работает сама по себе.Я пытался встроить его в качестве iFrame на свой сайт (см. Код ниже), но ширина не работает должным образом на моем сайте или даже при локальной загрузке на iOS (я не пробовал на Android, но я предполагаю, что это то же самоена все мобильные).Я хочу, чтобы он правильно измерял ширину на мобильном телефонеОн отлично работает на моем компьютере, но не на мобильном по какой-то необъяснимой причине.Не могли бы вы помочь мне решить эту проблему?

<style>
  .centerAlign {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
</style>

<center>
<iframe id="sim" frameBorder="0" class="centerAlign" src="https://cdn.shopify.com/s/files/1/0246/7086/3424/files/index.html?8154775124260488467" width="800" height="1000" onload="updateSize()">
  <p>Your browser does not support iframes.</p>
</iframe>
</center>

<script>

function updateSize() {
    var size = {
      width: window.innerWidth || document.body.clientWidth,
      height: window.innerHeight || document.body.clientHeight
  }
    
  if (size.width <= 800) {
  	document.getElementById("sim").width = size.width;
  	document.getElementById("sim").height = (size.width) * 1.5;
  }
  else {
     document.getElementById("sim").width = 800;
  	 document.getElementById("sim").height = 800 * 1.5;
  }
}

updateSize();

window.addEventListener("resize", function(event) {
    updateSize();
})

</script>