当页面有 iframe 时布局缩小

Question

我有一个 React 网站（基于 Next.js），我为此编写了一个 React 组件来嵌入 Tweets。但是当页面包含推文时，布局会缩小。我发现当 Twitter API 加载 iframe 时页面上有 iframe 时会发生这种情况。

我不知道发生了什么以及为什么我的视口设置没有得到尊重。

视口

<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"/>

理想布局

缩小版面（当页面上有推文时）。注意工具栏和文本大小。

PS：如果我嵌入 YouTube 视频，也会发生同样的事情。

Answer 1

如果没有代码，我最好的猜测是您的 HTML 或正文字体大小可能未设置。你用的是rem还是em？如果在您的 React 应用样式中未正确设置 iframe 样式，这可能会受到嵌入到您的 React 应用中的 iframe 样式的影响。

Answer 2

可能由于来自嵌入式代码的 CSS 重叠，您可以使用开发人员的工具（推荐 google 的）调试 CSS，并尝试在类中使用 !important 来重叠来自嵌入式代码的即将到来的代码。

示例：

 .p {
   font-size:16px !important;
}