如何解决页面具有iframe时布局缩小
我有一个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视频,也会发生同样的事情。
解决方法
没有代码,我最好的猜测是您的HTML或正文字体大小可能未设置。您使用的是rem还是em?如果未在React应用程序样式中正确设置iframe样式,则可能会受到影响。
,可能是由于来自嵌入式代码的CSS重叠,您可以使用开发人员的工具(推荐Google的工具)调试CSS,然后尝试在类中使用!important
来覆盖来自嵌入式代码的CSS代码。
示例:
.p {
font-size:16px !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。