FastGPT icon indicating copy to clipboard operation
FastGPT copied to clipboard

WORDPRESS网站的手机端嵌入应用显示不完整

Open HotelEnglish opened this issue 6 months ago • 2 comments

例行检查

  • [ ] 我已确认目前没有类似 issue
  • [ ] 我已完整查看过项目 README,以及项目文档
  • [ ] 我使用了自己的 key,并确认我的 key 是可正常使用的
  • [ ] 我理解并愿意跟进此 issue,协助测试和提供反馈
  • [x] 我理解并认可上述内容,并理解项目维护者精力有限,不遵循规则的 issue 可能会被无视或直接关闭

你的版本

  • [ ] 公有云版本
  • [x] 私有部署版本, 具体版本号: 4.8.7

问题描述, 日志截图 通过免登录窗口发布的应用,在嵌入到WORDPRESS网站后,通过手机端点开小图标,左侧窗口会被遮挡。 试过更换主题、添加额外CSS样式,均无法自行调整。

通过AI,给出了以下解决方案:

  1. 检查并调整外部脚本的样式 由于你无法直接修改外部脚本的CSS(除非你有权限访问并修改服务器上的文件),你可以尝试通过CSS覆盖来修改样式。在你的WordPress主题的CSS文件中(通常是style.css或自定义的CSS文件),你可以添加一些样式来确保聊天框在移动设备上能够正确显示。

例如,你可以尝试为聊天框设置最大宽度,并确保它在较小的屏幕上能够完全显示: #chatbot-iframe {
max-width: 100% !important;
overflow-x: hidden !important; /* 防止水平滚动 /
box-sizing: border-box !important; /
确保padding和border包含在宽度内 */
}

/* 如果聊天框被放置在一个特定的容器中,你也可以为该容器设置样式 */
.chatbot-container {
max-width: 100% !important;
overflow: hidden !important;
} 2. 检查WordPress主题的CSS 查看你的WordPress主题是否有任何可能影响聊天框显示的CSS规则。你可以使用浏览器的开发者工具(通常可以通过按F12或右键点击页面元素选择“检查”来访问)来检查元素并查看哪些CSS规则被应用到了聊天框上。

#注: **以上方法无效。**以下,只能提交issue了:

3. 响应式设计 如果可能的话,联系聊天框的提供者,询问是否有响应式设计的版本或建议如何使聊天框在移动设备上更好地显示。

复现步骤

预期结果 调整显示比例,解决问题 相关截图 41086b9528bb28d05c85f417fd26c15

HotelEnglish avatar Aug 19 '24 07:08 HotelEnglish