javascript - Div 内容在移动 View 中消失

Question

我正在尝试将实时聊天小部件 (Chatlio.com) 添加到我在本地主机上的 Bootstrap 元素的一个 div(总共 3 个 div):

<div id="chatlioWidgetPlaceholder" style="margin: auto; height:400px; width:100%;"></div>

聊天在桌面 View 中显示得很好，功能齐全，并在左下角的 div 中正确显示:

...但是一旦我使用检查员的“设备模式”进入移动 View ，聊天就不会显示，我也看不出原因!

我有单独的桌面和移动 View 包装器(由于 Bootstrap 中 div 的预期行为，我在桌面 View 的 Div 2 和移动 View 的 Div 1 中有聊天小部件)并且不确定这是否是原因

我已将所有 HTML 和 CSS 放在此链接中:https://jsfiddle.net/wLnxgo69/

Answer 1

I have separate wrappers for desktop and mobile view (due to the wanted behavior of the divs in Bootstrap I have the chat widget in Div 2 on Desktop view and in Div 1 in mobile view) and not sure if that is what causes it.

是的，可能是。我在 Chatlio 文档中看不到它是如何初始化的，但我猜代码可能看起来像 (jQuery)

$('#chatlioWidgetPlaceholder').chatlio();

这只会在页面(您的桌面页面)上的第一个 #chatlioWidgetPlaceholder 上初始化 Chatlio。

我的直觉是清理 HTML，这样你就不需要两个包装器了——从长远来看，代码将很难维护——但如果不这样做，你可能会看到 Chatlio 是否允许你定位一个元素按类别而不是 ID，否则您可能只需要第二个小部件。