Question

我已经添加了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。

Answer 1

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

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

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

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

详细答案：

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

然后将此值（24px，即在计算时计算出的height（0）+ margin-bottom（24）应用于iframe，在这里看到：

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

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

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

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

这是最终结果：

希望这很有帮助！

无法在手机上看到完整的弹出窗口

1 个答案:

详细答案：