无法在移动设备上看到完整弹出窗口

问题描述 投票：1回答：1

我已经添加了来自MailChimp的代码用于订阅弹出窗口，它在桌面上工作正常，但在移动设备上，它只是显示十字按钮而其他一切都被隐藏了。当我旋转手机并再次旋转时，我可以看到弹出窗口。我不知道为什么

我只在前端有一个图像，在标题中有MailChimp代码。

MailChimp代码

<head>
<script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/unique-methods/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">window.dojoRequire(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us20.list-manage.com","uuid":"22c2d7662403df9b1dcd37f96","lid":"a5970e3ec6","uniqueMethods":true}) })</script>
</head>

HTML

<body>

  <img src="homepage.png" width="100%">

</body>

我只能在手机上看到十字按钮而不是弹出窗口。该网站是：http://badmaash.store。

html css html5 css3 mailchimp
1个回答
0
投票

TL; DR：问题在于MailChimp如何确定元素的高度。

在加载页面时，脚本会错误地计算横幅的height（始终为0）。除了height之外，然后添加margin（24px），然后将其设置为iframe作为样式。

快速解决方法是使用CSS覆盖MailChimp应用的height，以允许横幅正确显示。

<style>
    .mc-layout__bannerContent iframe { height: auto !important }
    // Remainder of your CSS
</style>

Detailed Answer:

在加载页面时，执行JavaScript以确定iframe的内容（.bannerContent）的高度：

enter image description here

然后将此值（24px，计算时计算出的height（0）+ margin-bottom（24））应用于iframe，如下所示：

enter image description here

当触发脚本以显示模态时，由于iframe上定义的高度，您只能看到工具栏。

删除iframe的高度将显示所有内容，如下所示：

enter image description here

（旋转起作用的原因是因为调用了resize处理程序，正确地将内容的高度应用于iframe。）

我能够通过使用Charles重新编写HTML并注入以下CSS来解决此问题：<style>.mc-layout__bannerContent iframe { height: auto !important }。

enter image description here

这是最终结果：

enter image description here

希望这有用！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.