个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
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/
25
4
0
我有一个 ASP .NET Core MVC 网站，用于健身等。我正在努力做到这一点，以便人们可以将他们在我网站上的帐户与他们的 Strava 帐户相关联。我已经阅读并重新阅读了 Strava API
我在 Strava 上创建了一个应用程序。使用 read,activity:read,activity:read_all,read_all 权限在我的帐户上授权我的应用。 我不想轮询他们的 API 以
有谁知道用户在 Strava 上发布事件后如何获得完成路线图图像。我已阅读 Strava API 文档，但尚未找到 我用 https://strava.github.io/api/v3/activit
我正在尝试通过我的应用程序将我的锻炼上传到 strava & 当我发送我的请求时它返回我并显示错误 400 和这个: (String?) $R0 = "{\"message\":\"Bad Reque
我正在将 Strava 添加到 iOS 应用程序，Strava 使用 Auth2.0，每个 Strava API 调用都需要一个 token 来证明用户已通过身份验证并且应用程序有权访问 API。从用
我在使用 Strava API 时有点乱，但是当我想执行初始身份验证时，我总是会收到 404 错误。我对此很陌生，因此非常感谢您的帮助。 @Override
我试图使用 python 从 strava 的 api 获取分段工作，但每次我对任何特定分段发出请求时，响应都是默认设置的 30 个分段的列表。我没有运气改变标题中的分页参数。有什么想法吗？ 谢谢，明
起亚， 我从 Strava 导出了我所有的 GPX 文件，所以我可以对它们进行一些分析，但我一直在试图弄清楚每个文件用于什么类型的事件。 例如，我的文件看起来像这样，其中 元素似乎定义了事件类型。
我希望人们使用 Strava 帐户登录(strava 是一个骑行/运行平台) Firebase 有一些默认的身份验证登录提供程序，如 Google、twitter 等，但没有 Strava。有没有其他
我正在尝试使用 Oauth2 连接到 strava api，我的应用程序的注册需要一个授权回调域，例如:http://testapp.com但我正在本地测试这个，我的网址如下:http://local
我正在尝试使用 strava v3 api 获取数据.我对 JS 很陌生。我复制了示例 XMLHttpRequest 代码，但我得到的只是返回了一个空字符串。如果我去链接 manually在浏览器中，
只是想知道是否有人知道 Strava 如何能够在锻炼期间在 iOS 后台运行？我目前正在构建一个基于位置的 iOS 应用程序，它需要在后台继续运行，我有点困惑。 在过去的一个月里，我能够使用 Heal
我在使用用于 iOS 应用程序中的 OAuth2 进程的新 ASWebAuthenticationSession 类时遇到问题。 我想使用此类将我的应用程序与我的 Strava 帐户相关联。我有以下代
我有一个显示通知栏的前台任务，目的是让这个通知栏不可移动。通知的配置是: Notification notification = new NotificationCompat.Builder(this
我正在将 strava api 集成到我的应用程序中。我需要有关授权回调域的帮助，即在 api 注册期间需要帮助，以便在授权后设备浏览器再次打开应用程序以供进一步使用。当我尝试提交 myapp://
我正在尝试在 Flask 项目中使用 Stava API。我看到了以下 stackoverflow 并安装了 swagger_client swagger-codegen 生成 -i https://
UPDATE: The idea behind my attempts so far has been focused on adjusting the iframe container and fi
编辑 - 因为我无法用 Strava 标记此内容，如果您有兴趣，这里是文档 - http://strava.github.io/api/ 我顺利通过了身份验证，并在 response.read 中获得
我想从 iOS 向 Strava 发布事件。 Strava 文档 ( http://strava.github.io/api/v3/uploads/#post-file ) 的 curl 示例如下:
我无法从 Strava 的 api 文档中的 url 访问所有运动员事件(我自己的)。 我能够获得自己的年初至今统计数据: https://www.strava.com/api/v3/athletes
我是一名优秀的程序员,十分优秀！