Question

我制作了一个自定义Shopify的购物车旋转木马，它是hosted on my Shopify here，可以完美地自己工作。我试图将其作为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>

移动版（iOS）iFrame的尺寸问题

0 个答案: