在移动设备上嵌入超出页面宽度的宽度-在Squarespace中

Question

我正在与Squarespace网站上的网页的移动版本上的html / css有关的非常特定的问题寻求帮助。 See this page

特别是在移动设备上，嵌入的内容溢出到主要内容区域右侧并在其右侧创建空白。理想情况下，我希望它仅以完整尺寸和移动方式在页面范围内显示整个嵌入内容，但是我有限的编码知识使我遇到了一个障碍。

知道代码很简单，但是任何帮助或线索都将不胜感激！

.responsive-iframe-container {
    position: relative;
    padding-bottom: 100%;
    padding-top: 60px;
    height: 100%;
    overflow: hidden;
}

.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!--
<iframe onload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://apps.blancaveils.com/veilMaker.html" frameborder="0" style="width: 850px; min-width: 100%; height:710px; border:none;" scrolling="no" > </iframe><script type="text/javascript"> var ifr = document.getElementById("JotFormIFrame-73548157882671"); if(window.location.href && window.location.href.indexOf("?") > -1) { var get = window.location.href.substr(window.location.href.indexOf("?") + 1); if(ifr && get.length > 0) { var src = ifr.src; src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get; ifr.src = src; } } window.handleIFrameMessage = function(e) { var args = e.data.split(":"); if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); } if (!iframe) { return; } switch (args[0]) { case "scrollIntoView": iframe.scrollIntoView(); break; case "setHeight": iframe.style.height = args[1] + "px"; break; case "collapseErrorPage": if (iframe.clientHeight > window.innerHeight) { iframe.style.height = window.innerHeight + "px"; } break; case "reloadPage": window.location.reload(); break; case "loadScript": var src = args[1]; if (args.length > 3) { src = args[1] + ':' + args[2]; } var script = document.createElement('script'); script.src = src; script.type = 'text/javascript'; document.body.appendChild(script); break; case "exitFullscreen": if (window.document.exitFullscreen) window.document.exitFullscreen(); else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen(); else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen(); else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen(); else if (window.document.msExitFullscreen) window.document.msExitFullscreen(); break; } var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false; if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) { var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)}; iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*"); } }; if (window.addEventListener) { window.addEventListener("message", handleIFrameMessage, false); } else if (window.attachEvent) { window.attachEvent("onmessage", handleIFrameMessage); } </script>
-->


<div align="center"><iframe width="850" height="710" src="https://apps.blancaveils.com/veilMaker.html" frameborder="0"></iframe></div>

Answer 1

您需要完成几件事。

首先，将iframe自身的最大宽度限制为其容器宽度的100％，如下所示：

iframe {
  max-width: 100%;
}

现在，下一部分要求您有权编辑the content that is within the iframe。iframe中的canvas元素也需要具有类似的宽度限制。但是，您不能通过其父级（Squarespace）添加以下CSS。也就是说，通过Squarespace CSS编辑器添加以下CSS无效，因为iframe的性质要求CSS必须在iframe中定义，而不是在iframe之外定义。因此，需要通过veilMaker.html 而不是通过Squarespace将以下内容添加：

canvas {
  max-width: 100%;
}

但是请记住，一旦做到这一点，您可能会发现用户界面变得太小而无法在移动设备上使用。看到这里：

如果UI太小，则必须编辑veilMaker.html“ app”本身以提高响应速度。这可能需要对整体布局和设计进行一些重新思考。例如，您可以选择重新构图画布，以在左侧裁剪出空白区域，然后将可选选项和导航移至画布的顶部或底部。