使Bandcamp iframe响应-居中和溢出问题

Question

我想只使用CSS来创建响应式Bandcamp iframe，如here（以及许多其他地方）所述。但是，有两个问题：

1. 如果我将页面放大到大于700px的宽度，则iframe容器将开始展开超过Bandcamp iframe所能支持的范围。这会在iframe保持相同大小的同时下推下面的文本

2. 一旦达到此限制，容器将不会居中。

我认为，合理的解决方案是对查看页面的设备的宽度> 700 px进行设置，以保持iframe无响应，例如。

if screen-width > 700px
   .responsive {
      width: 700px;
      ...
   }
else
   .responsive {
      width=100%;
      ...
   }

有没有办法做到这一点？还是一个更优雅的解决方案？

这是小提琴：https://jsfiddle.net/zg2cL06s/1/

Answer 1

解决方案1：max-width

在不更改其他任何内容的情况下限制iframe宽度的最快方法是添加max-width属性：

.responsive iframe {
  max-width: 700px;
}

这是更新的Fiddle，展示了最大宽度方法。

---

解决方案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居中放置的原始要求。我已经使用建议的居中方法更新了两个小提琴，即使用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进行一些巧妙的操作，但应注意，除非您还控制iframe内的代码 ，否则嵌入式iframe无法获得真正的响应体验。换句话说，如果没有从iframe内加载的页面发送明确的消息（除非您构建了iframe所显示的页面并且还建立了来回发送消息的机制，否则几乎不会发生这种情况），或者没有严重的骇客行为，父页面没有明显/干净的方法来了解有关iframe中内容的任何信息。因此，就所有意图和目的而言，据我所知，不可能计算出用于布置父页面的iframe内容的大小。对于您的Bandcamp示例，父页面无法知道在任何给定时间Bandcamp iframe的高度，以便在iframe内容的底部没有浪费的空间。这只是iframe和浏览器安全策略如何工作的不幸现实。

---

希望这会有所帮助。祝你好运！