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

Question

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

https://bjoernschefzyk.co

问题是，在100％的情况下，Insta小部件增加了容器div的宽度，从而在移动设备上引入了水平滚动。我通过用width: 300px;将Insta代码放在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;
  }
}