困難使Strava Iframe響應（CSS / HTML）

Question

更新：
到目前為止我的嘗試背后的想法一直專注於調整iframe容器並根據Iframe的內在比例來修復它，這樣當它響應比例變化時，內容也會按比例變化。 這似乎不起作用，因為iframe的某些元素仍然是固定的。 我真的希望有一個響應式Strava Iframe但由於某種原因無法想出實現這一點。 到目前為止，我已經使用當前的嘗試制作了Codepen Collection 。

我最近添加了一個短代碼，用於將Strava iframe嵌入我的Hugo網站（學術主題）。 在桌面上，設備iframe正確呈現並且似乎在瀏覽器中響應，但在移動設備上，情況並非如此。 手頭的問題可以在這個網頁和我的GitHub回購中看到。 我將非常感謝任何幫助解決這個問題。

我一直在嘗試在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> ？

如果是的imma將用解決方案編輯我的帖子:)

編輯

到目前為止我發現的關於創建響應式iframe的最佳文章是如何制作響應式iframe - 這很容易！ 。

有三個要點：

在iframe開始標記中不設置任何屬性，特別是寬度和高度
在iframe周圍放一個div容器，並使用CSS height：0 ; 然后填充底部：nn％; 給容器一個高度表示為高度：寬度比率百分比。
使用-webkit-overflow-scrolling設置內聯樣式：touch和overflow：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-bottom的樣式，這樣，如果你有多個iframe，並且它們具有不同的wxh比率，你所要做的就是為每個編碼一個類，並將padding-bottom設置為不同的百分比。

困難使Strava Iframe響應（CSS / HTML）

問題描述

1 個解決方案

解決方案1
0 2019-05-24 07:46:04

困難使Strava Iframe響應（CSS / HTML）

問題描述

1 個解決方案

解決方案1 0 2019-05-24 07:46:04

解決方案1
0 2019-05-24 07:46:04