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

Question

我构建了一个简单的页面并嵌入了一些 Instagram 帖子。

问题是，在 100% 的情况下，Insta 小部件增加了容器的宽度 div，这在移动设备上引入了水平滚动。我部分解决了这个问题，方法是将 Insta 代码放在 div 和 width: 300px; 上，但是在 Chrome 上 Android 上，出于某种原因，LinkedIn 应用内浏览器也在 iOS，这并不总是有效。问题似乎是 Instagram 小部件最初呈现更宽，然后调整大小，但此时容器 div 已经更宽了。

这里有一个问题的示例：

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

Answer 1

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

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

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

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

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

How to avoid Instagram embeds to increase width of container div on mobile?

html

css

instagram