# 新 /about 横幅在移动设备上被裁切

**URL:** https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354
**Category:** UX
**Created:** [2024 年9 月 1 日 01:29 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354 "2024-09-01T01:29:30Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [2024 年9 月 1 日 01:29 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/1 "2024-09-01T01:29:30Z")

</div>

早上好！

我注意到，在移动设备（iPhone 13 Pro、Google Chrome，但这应该没有区别）的 `/about` 页面上

 ![image](https://global.discourse-cdn.com/meta/original/4X/6/2/e/62eb9e7c18e944195a90861351b48f6ab2125897.png)

这可能是故意的，而且无法修复，不过，我还是在这里提一下 🙂

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2024 年9 月 1 日 01:31 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/2 "2024-09-01T01:31:34Z")

</div>

可以在 Android A14、Chrome 上复现。  
我认为原因是这是一个图片，无法换行。可能不是故意的。

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2024 年9 月 2 日 01:42 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/5 "2024-09-02T01:42:21Z")

</div>

新的关于横幅 ATM 更适合桌面版。

将此添加到您的自定义 TC 中的移动 CSS：

```css
.about__banner {
  width: calc(120%);
  max-width: 392px;
  margin-left: -0.50em;
  padding-bottom: 0.5em;
}

```

 ![在图片中，有一个名为“Xtropolis.one”的服务的宣传广告，该服务似乎与虚拟现实技术有关。广告展示了各种鲜艳的霓虹灯和未来主义元素，暗示着尖端科技主题。（由 AI 标注）](https://global.discourse-cdn.com/meta/original/4X/b/5/5/b55f6066e47545771578eb849828ba298a55ece7.jpeg)

新关于页面上的主题在此处

> [@New and improved About page at /about is live](https://meta.discourse.org/t/new-and-improved-about-page-is-live/324212/1):
>
> We’ve redesigned the /about page in Discourse. Learn more about configuration options in the documentation topic: [Understanding and customizing the About page](https://meta.discourse.org/t/understanding-and-customizing-the-about-page/332161) You can see it right here by heading to [/about](https://meta.discourse.org/about). Here’s a screenshot: Notable additions Banner image at the top of the page Extended description that supports HTML/markdown 2-columns layout to reduce the amount of white space on wide screens Expandable/collapsible lists of admins and mode…

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2024 年9 月 2 日 23:13 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/6 "2024-09-02T23:13:15Z")

</div>

这应该可以解决问题：

> <https://github.com/discourse/discourse/pull/28692>
>
> Before:
> 
> \<img src="https://github.com/user-attachments/assets/5f57fd2f-4b43-4e…b4-b8b8-4ae2b41f1a1a" width=500\>
> \<img src="https://github.com/user-attachments/assets/97c0e74e-d4a9-481e-9fa5-ae90c1e86576" width=300\>
> 
> After:
> 
> \<img src="https://github.com/user-attachments/assets/92a8f660-170b-480b-9338-daa9c8cef073" width=500\>
> \<img src="https://github.com/user-attachments/assets/2241161a-c343-41a4-8bed-758de19ac0dd" width=300\>

我们可能会添加支持以上传具有不同尺寸的用于移动设备的图片，但目前上面的 PR 应该能极大地改善移动设备上的情况。

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2024 年9 月 3 日 02:47 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/7 "2024-09-03T02:47:43Z")

</div>

嗯……它_大部分_已修复，但尚未完全修复。

 ![这张图片似乎是来自移动设备的屏幕截图，显示了一个带有黑色背景和白色文本的网站。(由 AI 标注)](https://global.discourse-cdn.com/meta/original/4X/a/a/8/aa8f557b0ab21fe51e7362e6a94eb2734537227c.jpeg)

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2024 年9 月 3 日 10:05 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/8 "2024-09-03T10:05:00Z")

</div>

我的手机（iPhone 15 Pro）上看起来没问题：

 ![图片显示一个电脑屏幕，上面打开了一个 Discourse Meta 应用程序，显示了关于 Discourse 社区在线家园的消息。（由 AI 标注）](https://global.discourse-cdn.com/meta/original/4X/5/4/6/54622a099bb408276ccc06af6bd1aa90fef16afe.jpeg)

你的设备和浏览器是什么？

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [2024 年9 月 3 日 10:25 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/9 "2024-09-03T10:25:54Z")

</div>

在 iPhone 13 Pro/Chrome 上看起来不错

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/b/7/7b7e03d8014676632bf077510fcac2b2778d28e6.png)

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2024 年9 月 3 日 10:42 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/10 "2024-09-03T10:42:37Z")

</div>

Android A14, Chrome。

---

<div class="post-metadata">

### Author: ![Osama](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osama/32/98013_2.png) [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2024 年9 月 5 日 15:00 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/11 "2024-09-05T15:00:47Z")

</div>

> [@NateDhaliwal](#):
>
> 嗯……它_大部分_已修复，但尚未完全修复。
> 
> ![此图片似乎是来自移动设备的屏幕截图，显示一个黑色背景和白色文字的网站。(由AI配字幕)](https://global.discourse-cdn.com/meta/original/4X/a/a/8/aa8f557b0ab21fe51e7362e6a94eb2734537227c.jpeg)

@NateDhaliwal 您之前遇到的问题现在应该已修复：

> <https://github.com/discourse/discourse/commit/c76ff5c994e0d5af04c13cf91fb267f312dce208>
>
> Static pages such as /about, /faqs, /tos etc. currently overflow horizontally on… some Android devices (reproducible on Samsung Galaxy A11). It seems like the \`width: 100%\` property on \`.body-page\` is what causing the problem, and removing it doesn't seem to break anything on the various devices that I've tested (desktop, iOS, Android).

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2024 年9 月 6 日 00:25 UTC](https://meta.discourse.org/t/new-about-banner-cut-off-on-mobile/324354/12 "2024-09-06T00:25:07Z")

</div>

太棒了！我想知道，如果在移动设备上，图片中的文字是否应该居中？
