嵌入到移动设备的页面宽度之外-在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，即canvas内部的veilMaker.html元素。该画布元素还需要类似地限制其宽度。请注意，您无法通过其父级添加以下CSS。也就是说，通过Squarespace CSS编辑器添加以下CSS不会产生任何效果，因为iframe的性质要求在其内部而不是外部定义样式。因此，不需要通过Squarespace在[[veilMaker.html]中添加以下内容：

canvas {
  max-width: 100%;
}

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

如果UI太小，则必须编辑veilMaker.html“应用”本身以使其响应速度更快。这可能需要重新考虑整体布局和设计。