UPDATE:
The idea behind my attempts so far has been focused on adjusting the iframe container and fixing it based on the intrinsic ratio of the Iframe so that it would then as it responds to change in proportion the contents would also change proportionally. This does not seem to work as some elements of the iframe remain fixed. I would really like to have a responsive Strava Iframe but for some reason cannot figure out to achieve this. I have made a Codepen Collection with current attempts thus far.
我最近添加了一个用于嵌入的简码 Strava iframe 到我的 Hugo 网站(学术主题)。在桌面设备上，iframe 可以正确呈现并且在浏览器中看起来是响应式的，但在移动设备上，情况并非如此。手头的问题可以看这个webpage和我的 GitHub repo .如果您能帮助我解决此问题，我将不胜感激。
我一直在尝试 Hugo 论坛和其他在线资源上推荐的多种 CSS 调整和变体。
当前简码:
{{ if and (.Get "id") (.Get "hash") }}
<div class="responsive-object">
<iframe height='405' width='590' frameborder="0" allowtransparency='true' scrolling='no' src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}
当前的 CSS:
.responsive-object iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}```
Despite trying to make the iframe container responsive, the same result occurs where it seems responsive on desktop browsers yet not on mobile devices. I am unsure of how to proceed from this point, or if I am missing something.
最佳答案
你加了<meta name="viewport" content="width=device-width, initial-scale=1.0">吗
致您的<Head> ？
如果是，我将使用解决方案编辑我的帖子 :)
编辑
到目前为止，我发现的关于创建响应式 iframe 的最佳文章是 How To Make Responsive Iframes - It's Easy! .
三个要点:
在 iframe 开始标记中不设置任何属性，特别是 width 和 height
在 iframe 周围放置一个 div 容器，并使用 CSS height: 0;然后 padding-bottom: nn%; 为容器提供高度，以高度:宽度的百分比表示。
使用 -webkit-overflow-scrolling: touch 和 overflow: auto 将 div 样式设置为内联，这是处理移动设备上的滚动所必需的，并且在CSS。
这段代码对我有用:
//HTML(在嵌入 block 中，而不是代码块中)
<div class="iframe-container iframe-container-for-wxh-500x350" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<iframe src="http://www.targetWebsiteURL.com"> <p style="font-size: 110%;"><em><strong>IFRAME: </strong> There is iframe content being displayed here but your browser version does not support iframes.</em> Please update your browser to its most recent version and try again.</p> </iframe>
</div>
//CSS
.iframe-container { position: relative; margin: 5px; height: 0; overflow: hidden; }
.iframe-container-for-wxh-500x350 {
padding: 25px 25px 70% 25px; /* padding-bottom = h/w as a % */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: 1px inset #7a8b8b;
/* put following styles (necessary for overflow and
scrolling handling) in div container around iframe
because not stable in CSS
-webkit-overflow-scrolling: touch;
overflow: auto; */
} 使用一个单独的类来设置 padding-bottom 的样式，这样，如果您有多个 iframe 并且它们具有不同的 wxh 比率，您所要做的就是为每个代码编写一个类并将 padding-bottom 设置为不同的百分比。
关于html - 难以使 Strava Iframe 响应式 (CSS/HTML)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56287729/