Вставить выход за пределы ширины страницы на мобильном телефоне - в Squarespace - PullRequest
Новая
       9

Вставить выход за пределы ширины страницы на мобильном телефоне - в Squarespace

0 голосов
/ 13 февраля 2020

Мне нужна помощь по очень конкретной c проблеме с html / css в мобильной версии страницы на нашем сайте в Squarespace. См. Эту страницу

В частности, на мобильных устройствах встроенный контент переполняется и создает пустое пространство справа от основной области контента. В идеале я хотел бы, чтобы он просто отображал весь код встраивания в границах страницы как в полном размере, так и на мобильном устройстве - но мои ограниченные знания в области кодирования помогают мне справиться с препятствиями.

Знайте, что код добрый всего, но любая помощь или ведет с благодарностью! 

.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>

1 Ответ

0 голосов
/ 13 февраля 2020

Есть пара вещей, которые вам нужно сделать, чтобы выполнить sh.

Во-первых, ограничьте максимальную ширину самого iframe 100% ширины его контейнера, как это : 

iframe {
  max-width: 100%;
}

Теперь для следующей части требуется, чтобы у вас был доступ для редактирования содержимого, которое находится в iframe , элемент canvas в iframe также должен иметь свою ширину так же ограничен. Однако вы не можете добавить следующий CSS через его родителя (Squarespace). То есть добавление следующего CSS через редактор Squarespace CSS не будет иметь никакого эффекта, потому что природа iframes требует, чтобы CSS был определен внутри iframe, а не за его пределами. Поэтому следующее необходимо добавить в veilMaker. html не через Squarespace: 

canvas {
  max-width: 100%;
}

Однако имейте в виду, что, как только вы этого добьетесь, вы можете обнаружить, что пользовательский интерфейс становится слишком маленьким, чтобы его можно было использовать на мобильных устройствах. См. Здесь:

enter image description here

Если пользовательский интерфейс слишком мал, вам придется отредактировать само "приложение" veilMaker.html чтобы сделать его более отзывчивым. Это может потребовать некоторого переосмысления общего макета и дизайна. Например, вы можете изменить структуру холста, чтобы обрезать пустое пространство слева, а затем, возможно, переместить выбираемые параметры и навигацию вверх или вниз холста.

...