美洽怎么设置访客端聊天窗口横屏适配布局？

美洽访客端横屏适配可以通过三步实现：在管理后台优化样式、添加自定义CSS（使用orientation或宽度断点）、并用少量JS监听尺寸或方向变化，动态切换窗口宽高、位置和安全区域留白，保证按钮可点、遮挡最小和视觉一致。在单页应用或WebView中，注意监听路由与DOM变动以保证样式及时生效。测试覆盖

先把问题说清楚：为什么要做横屏适配？

讲清楚原因比直接把代码给你有用得多。横屏时，屏幕宽度变大但高度变小，访客端聊天窗口如果仍沿用竖屏布局，会出现：

• 窗口高度超出可视区，重要内容或按钮被遮挡；
• 浮动位置不合理，遮住页面关键交互；
• 圆角、阴影、留白看起来不协调，影响体验；
• 在有刘海或安全区（safe-area）的设备上，控件位置可能不可点击。

因此横屏适配的核心目标是：保证窗口宽高与位置在不同方向上合理、按钮和关闭最小化控件可触达，以及视觉一致性与性能良好。

总体思路（费曼写法：把复杂问题拆成三块）

• 配置优先：先在美洽管理后台看是否有“访客端样式”或“自定义CSS”入口，能改的尽量在后台改，省心且统一。
• CSS为主：用媒体查询（orientation 或 max-width）来调整宽高、位置、圆角、最大高度等，做到优雅降级。
• JS补位：当仅靠CSS不能满足（比如需要读到iframe内部或动态注入元素时），用少量JS监听resize/orientationchange或用MutationObserver应用样式。

步骤一：先看美洽后台能做什么

登录美洽控制台，找访客端或窗口样式相关项。常见可配置内容包括：弹窗位置（右下/左下）、默认宽高、圆角、主题色、最小化行为、是否显示遮罩等。如果后台已经提供“移动端/横屏样式”开关，优先使用它。

如果后台不够细粒度，下一步是用自定义CSS或前端覆盖。

步骤二：用CSS做横屏适配（推荐）

若能在全站注入CSS（或在美洽后台粘贴自定义样式），大多数场景只靠媒体查询就能搞定。关键点：

• 使用 @media (orientation: landscape) 或结合宽度断点 @media (max-width: 768px) and (orientation: landscape)。
• 设置合理的最大高度，例如 max-height: calc(100vh - 56px)，为顶部/底部留出控制栏空间。
• 考虑 iOS 安全区：使用 env(safe-area-inset-bottom) 或 constant() 做留白。
• 尽量避免使用固定像素高度（特别是在横屏），用百分比或vh更灵活。

下面是一份通用的 CSS 参考（请先在浏览器开发者工具里找到美洽聊天窗口的真实选择器，然后替换下面的 .meiqia-widget）：

示例 CSS（供参考）

说明：选择器可能与实际不同，查找时在控制台搜索“meiqia”或“美洽”生成的元素。

示例规则（文本形式）：

基本竖屏样式：
.meiqia-widget { position: fixed; right: 16px; bottom: 16px; width: 360px; max-width: calc(100% – 32px); height: 600px; border-radius: 12px; z-index: 99999; }

手机横屏优先样式：
@media (max-width: 900px) and (orientation: landscape) {
  .meiqia-widget { right: 50%; transform: translateX(50%); bottom: env(safe-area-inset-bottom, 0px); width: 95%; max-width: 960px; height: calc(100vh – 40px); border-radius: 6px; }
}

步骤三：用少量 JS 弥补动态场景

如果聊天窗口是动态注入（常见），或嵌入在iframe里，CSS 可能无法直接命中。这时可以：

• 用 resize/orientationchange 事件动态切换类名；
• 用 MutationObserver 监听聊天插件节点出现后立刻应用样式；
• 对于包含 iframe 的情况，若未跨域（rare），可以访问 iframe 内部并修改样式；否则只能调整 iframe 容器的尺寸样式。

示例 JS（简化版，替换选择器后可直接使用）：

思路：找聊天容器，横屏时加类 mq-landscape，移除则恢复。

推荐断点与常用尺寸（可直接拿来用）

实战小贴士（避免踩坑）

• 先找选择器：用浏览器开发者工具（Elements 面板）搜索美洽插入的节点，确认类名/ID/iframe路径，不要盲目猜测。
• 优先后台：后台自定义样式统一管理，避免每个页面都写覆盖样式。
• 使用 !important 谨慎：如果美洽样式权重高，可临时用 !important，但长期要找出更优雅解决。
• 注意安全区：iPhone 横屏时的安全区会影响底部控件，记得用 env(safe-area-inset-*) 留白。
• 单页应用：当页面路由切换、或者组件重绘时，监听 DOM 变化，重新触发适配逻辑。
• WebView 嵌入：有时候WebView默认没有meta viewport，会导致尺寸计算异常，确保页面包含 。

常见问题与排查清单

• 适配没生效：检查选择器是否命中，是否样式被覆盖（用开发者工具看Computed），是否JS因为跨域无法操作iframe内部。
• 按钮被遮挡：调高 z-index、增加底部安全留白，或把最小化按钮移到更显眼位置。
• 样式在某些机型失效：用Chrome设备仿真和真实机型同时测试，尤其注意iOS Safari。
• 页面滚动受影响：如果横屏时使用固定定位并遮挡内容，可在打开聊天时加遮罩或锁定背景滚动（但要保留可访问性）。

无权修改第三方主样式时怎么办？

有时你无法直接修改美洽内部样式（比如iframe且跨域），这时可以：

• 调整 iframe 容器的尺寸和位置；
• 在页面层面通过遮罩、提示条或者旁边浮动按钮替代原有入口；
• 联系美洽客服申请支持自定义横屏样式或获取具体接入文档。

最后顺手给一份测试清单

• Chrome DevTools 模拟竖屏与横屏（多设备多像素比）
• 真机测试：iOS 横屏/竖屏、Android 横屏/竖屏
• 单页应用测试：路由切换后聊天窗口是否仍然正确定位
• WebView 测试：确认 meta viewport、生效的安全区留白
• 交互测试：打开/关闭/最小化/发送消息/文件上传等功能是否可达

如果你愿意，我可以帮你把在页面上抓到的实际选择器改成示例中的 .meiqia-widget，并给出一份可以直接粘贴到站点或美洽后台的完整CSS/JS清单，或者根据你当前遇到的具体问题（例如按钮被遮挡、iframe跨域样式无法修改等）给出更针对性的方案。