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

【问题标题】：Unable to see full pop-up on mobile无法在移动设备上看到完整的弹出窗口
【发布时间】：2019-09-10 05:33:26
【问题描述】：

我添加了 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 mailchimp

【解决方案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 }。

这是最终结果：

希望这对您有所帮助！

【讨论】：

【解决方案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>

【讨论】：