[Bug] chat-preview.lobehub.com网站的Banner广告在手机无法正常显示

[zhufeizzz]

📦 部署环境

Official Preview

📌 软件版本

v1.39.0

💻 系统环境

iOS

🌐 浏览器

Edge

🐛 问题描述

这个Banner是否可以移除，不仅难看，而且在iPhone手机上无法正常显示，体验非常差。

📷 复现步骤

使用iPhone手机将https://chat-preview.lobehub.com/chat安装为PWA应用

🚦 期望结果

期望取消Banner广告，在iPhone上正常显示。

📝 补充信息

No response

[lobehubbot]

👀 @zhufeizzz

Thank you for raising an issue. We will investigate into the matter and get back to you as soon as possible.
Please make sure you have given us as much context as possible.
非常感谢您提交 issue。我们会尽快调查此事，并尽快回复您。 请确保您已经提供了尽可能多的背景信息。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

📦 Deployment environment

Official Preview

📌 Software version

v1.39.0

💻 System environment

iOS

🌐 Browser

Edge

🐛 Problem description

Whether this Banner can be removed is not only ugly, but also cannot be displayed properly on the iPhone, making the experience very poor.

📷 Steps to reproduce

Use your iPhone to install https://chat-preview.lobehub.com/chat as a PWA application

🚦 Expected results

It is expected that the Banner advertisement will be canceled and displayed normally on the iPhone.

📝 Supplementary information

No response

[dosubot]

@zhufeizzz 你好！我是Dosu，一个可以帮助您解决软件问题、回答问题并成为贡献者的机器人。我会在等待人类维护者的过程中帮助您。

I found a similar closed issue regarding mobile display problems, but no solution was provided in the comments ^[1].

Regarding your question about removing or customizing the Banner component, I couldn't find specific information in the repository about a configuration or setting that allows for this. However, the CloudBanner component does have a mobile prop that affects its behavior on mobile devices ^[2].

For handling viewport settings and scaling for PWA installations on iOS devices, the application uses the generateViewport function, which sets specific viewport settings for mobile devices to prevent zooming and ensure proper display ^[3].

If the Banner is not displaying correctly on iOS devices, it might be worth checking the CSS media queries or styles applied to the Banner component, although specific details on this were not found in the repository.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[arvinxx]

这个 Banner 的设置是 by design 的，如果你觉得体验差，可以选择自部署，自部署版本将不会有这个 Banner。

因为 chat preview 是我们的一个演示站点，本身就不建议你在日常生产场景下使用。所以故意用这种方式软性逼迫你们不要在日常中使用。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This Banner is set by design. If you feel the experience is poor, you can choose self-deployment. The self-deployment version will not have this Banner.

Because chat preview is one of our demo sites, it is not recommended for you to use it in daily production scenarios. So I deliberately use this method to force you not to use it in your daily life.

[lobehubbot]

✅ @zhufeizzz

This issue is closed, If you have any questions, you can comment and reply.
此问题已经关闭。如果您有任何问题，可以留言并回复。

[zhufeizzz]

这个 Banner 的设置是 by design 的，如果你觉得体验差，可以选择自部署，自部署版本将不会有这个 Banner。

因为 chat preview 是我们的一个演示站点，本身就不建议你在日常生产场景下使用。所以故意用这种方式软性逼迫你们不要在日常中使用。

@arvinxx 保留Banner其实也没问题，不过起码要能在手机上PWA正常显示吧。

[lobehubbot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

This Banner is set by design. If you feel the experience is poor, you can choose self-deployment. The self-deployment version will not have this Banner.

Because chat preview is one of our demo sites, it is not recommended for you to use it in daily production scenarios. So I deliberately use this method to force you not to use it in your daily life.

@arvinxx There is actually no problem in keeping the Banner, but at least it must be able to display normally on the PWA on the mobile phone.