無法在手機上看到完整的彈出窗口

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 (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

我沒有足夠的代表來支持或評論傑克的回答，但我想說聲謝謝。

我一直在尋找關於這個問題的答案，他的答案絕對是正確的。

我正在使用 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>

無法在手機上看到完整的彈出窗口

問題描述

2 個解決方案

解決方案1
1 已采納 2019-04-21 11:03:45

詳細答案：

解決方案2
0 2020-01-06 21:02:09

無法在手機上看到完整的彈出窗口

問題描述

2 個解決方案

解決方案1 1 已采納 2019-04-21 11:03:45

詳細答案：

解決方案2 0 2020-01-06 21:02:09

解決方案1
1 已采納 2019-04-21 11:03:45

解決方案2
0 2020-01-06 21:02:09