使 Bandcamp iframe 响应 - 居中和溢出问题
Making Bandcamp iframe responsive - centering and overflow issues
我想要一个仅使用 CSS 的响应式 Bandcamp iframe，如 here（以及许多其他地方）所述。但是，有 2 个问题：
如果我将页面放大到宽度大于 700 像素，iframe 容器开始扩展超过 Bandcamp iframe 的能力。这会在 iframe 保持相同大小的同时下推下面的文本
达到此限制后容器不居中。
我认为合乎逻辑的解决方案是在查看页面的设备宽度大于 700 像素时以某种方式进行设置，以保持 iframe 无响应，例如
if screen-width > 700px
.responsive {
width: 700px;
...
}
else
.responsive {
width=100%;
...
}
有办法吗？或者更优雅的解决方案？
这是 fiddle：https://jsfiddle.net/zg2cL06s/1/
解决方案 1：max-width
在不改变任何其他内容的情况下限制 iframe 宽度的最快方法是添加 max-width 属性:
.responsive iframe {
max-width: 700px;
}
这是一个更新的 Fiddle 演示 max-width 方法。
解决方案 2：媒体查询
实现此目的的另一种方法是使用媒体查询。
如果屏幕宽度大于 700，您可以添加这样的内容将宽度限制为 700px。
@media only screen and (min-width: 700px) {
.responsive iframe {
width: 700px;
}
}
这是一个 Fiddle 媒体查询方法演示。
这里有一些资源可以帮助您更多地了解媒体查询，这确实是响应式 Web 开发的基石。
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
编辑：居中
我错过了您最初要求将 iframe 居中的要求。我已经用我推荐的居中方法更新了两个 Fiddles，即使用 display: flex;.
.responsive {
display: flex;
flex-direction: column;
align-items: center;
}
这里有一些使用 flex 样式的资源：
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://www.w3schools.com/css/css3_flexbox.asp
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
关于 iframe 的注意事项
虽然您可以使用 iframe 做一些巧妙的事情，但您应该意识到，除非您还控制 inside iframe 的代码，否则您无法使用嵌入式 iframe 获得真正的响应体验.换句话说，如果没有从 iframe 中加载的页面发送明确的消息（除非您构建了 iframe 显示的页面并且还构建了来回发送消息的机制，否则几乎不会出现这种情况），或者没有一些严重粗糙的 hacks，父页面没有 obvious/clean 方式了解 iframe 内的内容。因此，出于所有意图和目的（据我所知）不可能计算用于布局父页面的 iframe 内容的大小。对于您的 Bandcamp 示例，父页面无法知道 Bandcamp iframe 在任何给定时间需要多高才能在 iframe 内容底部没有浪费 space。这只是 iframe 和浏览器安全策略如何运作的不幸现实。
希望这对您有所帮助。祝你好运！
我想要一个仅使用 CSS 的响应式 Bandcamp iframe，如 here（以及许多其他地方）所述。但是，有 2 个问题：
如果我将页面放大到宽度大于 700 像素，iframe 容器开始扩展超过 Bandcamp iframe 的能力。这会在 iframe 保持相同大小的同时下推下面的文本
达到此限制后容器不居中。
我认为合乎逻辑的解决方案是在查看页面的设备宽度大于 700 像素时以某种方式进行设置，以保持 iframe 无响应，例如
if screen-width > 700px
.responsive {
width: 700px;
...
}
else
.responsive {
width=100%;
...
}
有办法吗？或者更优雅的解决方案？
这是 fiddle：https://jsfiddle.net/zg2cL06s/1/
解决方案 1：max-width
在不改变任何其他内容的情况下限制 iframe 宽度的最快方法是添加 max-width 属性:
.responsive iframe {
max-width: 700px;
}
这是一个更新的 Fiddle 演示 max-width 方法。
解决方案 2：媒体查询
实现此目的的另一种方法是使用媒体查询。
如果屏幕宽度大于 700，您可以添加这样的内容将宽度限制为 700px。
@media only screen and (min-width: 700px) {
.responsive iframe {
width: 700px;
}
}
这是一个 Fiddle 媒体查询方法演示。
这里有一些资源可以帮助您更多地了解媒体查询，这确实是响应式 Web 开发的基石。
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://www.w3schools.com/css/css_rwd_mediaqueries.asp
- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
编辑：居中
我错过了您最初要求将 iframe 居中的要求。我已经用我推荐的居中方法更新了两个 Fiddles，即使用 display: flex;.
.responsive {
display: flex;
flex-direction: column;
align-items: center;
}
这里有一些使用 flex 样式的资源：
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://www.w3schools.com/css/css3_flexbox.asp
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.sketchingwithcss.com/samplechapter/cheatsheet.html
关于 iframe 的注意事项
虽然您可以使用 iframe 做一些巧妙的事情，但您应该意识到，除非您还控制 inside iframe 的代码，否则您无法使用嵌入式 iframe 获得真正的响应体验.换句话说，如果没有从 iframe 中加载的页面发送明确的消息（除非您构建了 iframe 显示的页面并且还构建了来回发送消息的机制，否则几乎不会出现这种情况），或者没有一些严重粗糙的 hacks，父页面没有 obvious/clean 方式了解 iframe 内的内容。因此，出于所有意图和目的（据我所知）不可能计算用于布局父页面的 iframe 内容的大小。对于您的 Bandcamp 示例，父页面无法知道 Bandcamp iframe 在任何给定时间需要多高才能在 iframe 内容底部没有浪费 space。这只是 iframe 和浏览器安全策略如何运作的不幸现实。
希望这对您有所帮助。祝你好运！