如何使嵌入式 Twitter 提要在尺寸上响应较小的屏幕？答案

【问题标题】：How to make embedded Twitter feed responsive in size for smaller screens?如何使嵌入式 Twitter 提要在尺寸上响应较小的屏幕？
【发布时间】：2018-12-14 14:40:48
【问题描述】：

这是 Twitter 生成的嵌入我的网站的代码：

<a class="twitter-timeline" data-width="250" data-height="1000" href="https://twitter.com/Supernova_Style?ref_src=twsrc%5Etfw">Tweets by Supernova_Style</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

我在 CSS 中尝试了几种不同的方法来更改提要的宽度，但都不起作用。当屏幕尺寸缩小到移动尺寸时，我想保持 twitter 提要可见。有人对我如何做到这一点有任何想法吗？

【问题讨论】：

所以你希望它有一定的尺寸，但如果它太大了就缩小以适应它吗？

标签： html css twitter feed

【解决方案1】：

我们最近发现 Twitter 的 publish.twitter.com 用于嵌入式配置文件时间线的相当新的代码生成器仍然会导致时间线溢出 iOS 设备的容器宽度的问题，特别是在宽度和高度设置时（并且没有数据推文-限制设置）。

目前我们正在通过添加的 css 处理此问题（根据需要，选择器可能会在您的附加特异性之前）：

.twitter-timeline { width: 100vw !important; }

【讨论】：

这个值也对我有用，谢谢。我在 iframe 中使用了我的 twitter 提要，因此我在 twitter 时间线链接上使用了 data-width="100vw" 而不是 CSS。

【解决方案2】：

将其包装在容器中并将属性设置为width: 100%; height:auto;，然后适当调整容器的大小。然后，您可以在必要时使用媒体查询。

示例：http://jsfiddle.net/o6qrxyga/1/

【讨论】：