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

问题描述

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

标签： htmlcssmailchimp

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

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

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

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

详细答案：

在页面加载时，将执行 JavaScript 以确定.bannerContentiframe 的内容 ( ) 的高度：

然后将该值 ( 24px，即在计算时计算的height(0) + margin-bottom(24)) 应用于，如下iframe所示：

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

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

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

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

这是最终结果：

希望这有帮助！

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

问题描述

解决方案

详细答案：

推荐阅读