如何避免 Instagram 嵌入以增加移动设备上容器 div 的宽度？

Question

我已经建立了一个简单的页面并嵌入了几个 Instagram 帖子。

https://bjoernschefzyk.co

问题在于，在 100% 的情况下，Insta 小部件增加了容器 div 的宽度，从而在移动设备上引入了水平滚动。我通过将 Insta 代码放在带有width: 300px; 的 div 中部分解决了这个问题，但是在 Android 上的 Chrome 以及出于某种原因在 iOS 上的 LinkedIn 应用内浏览器上，这并不能始终如一地工作。问题似乎是 Instagram 小部件最初渲染得更宽，然后调整大小，但此时容器 div 已经更宽了。

以下是问题的示例：

有什么办法可以解决这个问题吗？

Answer 1

您将 max-width: 500px 属性应用于容器、iframe( 540px) 和内容部分，因此它在较小的屏幕上扩展以达到其最大宽度。这是响应式的问题。所以当屏幕小于 500px 时将 max-with 改为 100%：

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%
  }
}

接下来，'#content' 元素的宽度仍然超过视图宽度，因为您的 box-sizing 属性默认为content-box，这意味着宽度为100% + padding + border px。改为border-box，那么最终的CSS应该是：

@media screen and ( max-width : 500px ) {
  #content {
    max-width: 100%;
    box-sizing: border-box;
  }
}