无法在移动设备上看到完整的 pop-up

Question

我已经从 MailChimp 添加了用于订阅的代码 pop-up，它在桌面上运行良好，但在移动设备上，它只显示十字按钮，其他所有内容都被隐藏了。当我旋转手机并再次旋转时，我可以看到 pop-up。不知道为什么

我只有 front-end 上的图片和 header 中的 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>

我只能在移动设备上看到十字按钮，而不是 pop-up。网站是：http://badmaash.store.

Answer 1

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>

详细答案：

加载页面时，执行 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 } 来解决这个问题。

这是最终结果：

希望对您有所帮助！

Answer 2

我没有足够的代表对 Jack 的回答进行投票或评论，但我想说声谢谢。

我一直在四处寻找这个问题的答案，他的答案绝对正确。

我正在使用 WordPress 并在 html 中我的 <head></head> 标签之间添加了他的代码。不确定这是否是最佳解决方案，但它确实有效。

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" >

  <script> /* MailChimp script here */ </script>

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

  <?php wp_head(); ?>
</head>

无法在移动设备上看到完整的 pop-up

Unable to see full pop-up on mobile

html

css

mailchimp

详细答案：