Question

更新：
到目前为止，我的尝试背后的想法一直集中在调整iframe容器并根据iframe的固有比率对其进行固定，这样，当它响应比例更改时，内容也将按比例更改。这似乎不起作用，因为iframe的某些元素保持固定。我真的很想拥有一个响应式的Strava Iframe，但由于某种原因，我想不通。到目前为止，我已经做出了Codepen Collection的尝试。

我最近添加了将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.

Answer 1

您添加<meta name="viewport" content="width=device-width, initial-scale=1.0">

到您的<Head>吗？

如果是的话，伊玛将用解决方案编辑我的帖子：）

编辑

到目前为止，我发现关于创建自适应iframe的最佳文章是How To Make Responsive Iframes - It's Easy!。

三个要点：

在iframe开头标签中未设置任何属性，尤其是宽度和高度
在iframe周围放置一个div容器，并使用CSS height：0 ;然后 padding-bottom：nn％; 为容器指定一个高度，该高度表示为高度与宽度的百分比。
使用 -webkit-overflow-scrolling：触摸和 overflow：auto 内联设置div的样式，这对于处理移动设备上的滚动是必需的，并且在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-bottom 的样式，这样，如果您拥有多个iframe，并且它们的wxh比例不同，那么您要做的就是为每个icode编写一个类并将 padding-bottom （填充底部）设置为不同的百分比。

难以使Strava Iframe响应式（CSS / HTML）

1 个答案: