Невозможно увидеть полное всплывающее окно на мобильном телефоне - PullRequest
Новая
       19

Невозможно увидеть полное всплывающее окно на мобильном телефоне

1 голос
/ 20 апреля 2019

Я добавил код из MailChimp для всплывающего окна подписки, и он отлично работает на настольном компьютере, но на мобильном устройстве он просто показывает крестик, а все остальное скрыто. Когда я поворачиваю мобильный телефон и вращаюсь снова, я вижу всплывающее окно. Я не знаю почему

У меня просто есть изображение на внешнем интерфейсе и код MailChimp в заголовке.

MailChimp Code 

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

1 Ответ

0 голосов
/ 21 апреля 2019

TL; DR: Проблема в том, как MailChimp определяет высоту ваших элементов.

При загрузке страницы скрипт неправильно вычисляет height баннера (всегда 0). В дополнение к height, затем добавляется margin (24 пикселя), который затем устанавливается на iframe в качестве стиля.

Быстрое решение состоит в том, чтобы использовать CSS для переопределения height, примененного MailChimp, чтобы баннер отображался правильно. 

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

Подробный ответ:

При загрузке страницы выполняется JavaScript для определения высоты содержимого (.bannerContent) фрейма:

enter image description here

Это значение (24px, которое является вычисленным height (0) + margin-bottom (24) во время расчета) затем применяется к iframe, видимому здесь:

enter image description here

Когда скрипт запускается для показа модального режима, вы видите только панель инструментов из-за определенной высоты в iframe.

Удаление высоты iframe покажет весь контент, как показано здесь:

enter image description here

(Причина вращения заключается в том, что вызывается обработчик resize, корректно применяющий высоту содержимого к iframe.)

Мне удалось решить эту проблему с помощью Чарльза, чтобы переписать ваш HTML-код и внедрить следующий CSS: <style>.mc-layout__bannerContent iframe { height: auto !important }.

enter image description here

Вот конечный результат:

enter image description here

Надеюсь, это было полезно!

...