难以使strava iframe响应(CSS/HTML)

更新：
到目前为止，我的尝试背后的想法一直集中在调整iFrame容器并根据iframe的固有比率进行修复，以便它会因为它对比例的变化做出响应，内容也将按比例变化。这似乎不起作用，因为iframe的某些元素保持固定。我真的很想有一个响应迅速的strava iframe，但由于某种原因，我无法弄清楚实现这一目标。到目前为止

我最近添加了一个将Strava Iframes嵌入我的Hugo网站(学术主题(的简编码。在台式机上，设备iFrames呈现正确呈现，并且在浏览器中似乎具有响应速度，但是在移动设备上，情况并非如此。可以在此网页和我的GitHub存储库中看到手头的问题。我将非常感谢解决此问题的任何帮助。

我一直在尝试在雨果论坛和其他在线资源上推荐的多次尝试的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>？

如果是，Imma将使用解决方案编辑我的帖子：(

编辑

迄今为止，我发现创建响应式iFrame的最佳文章是如何使响应式的iframe-很容易！

有三个明显点：

在iframe打开标签中设置没有属性，特别是 width 和 height
在iFrame周围放置一个Div容器，然后使用CSS 高度：0 ;然后填充底：nn％; 使容器以高度表示为高度：宽度比为百分比。
样式的DIV与 -webkit-overflow-scrollling：touch and 溢出：auto ，在移动设备上处理滚动且在移动设备上是不稳定所必需的CSS。

此代码对我有用：

//html(在嵌入块中，而不是代码块(

<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-todbotom ，这样，如果您有一个以上的iframe，并且它们的WXH比率不同，那么您所要做的就是代码每个类别并设置填充底部到不同百分比。

相关内容

最新更新

热门标签：