# 我的手机Logo为什么很奇怪

**URL:** https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090
**Category:** Support
**Created:** [2021年五月4日 03:39 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090 "2021-05-04T03:39:44Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![SettingDust](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/settingdust/32/218944_2.png) [@SettingDust](https://meta.discourse.org/u/SettingDust)
#### Post date: [2021年五月4日 03:39 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/1 "2021-05-04T03:39:44Z")

</div>

![image](https://global.discourse-cdn.com/meta/original/3X/3/d/3da3c49bdd2522f7d80635c50b9955f8aad6cb0c.png)  
比分是 3:1，但显示为 1:1。这是一个 SVG 文件。  
 ![image](https://global.discourse-cdn.com/meta/original/3X/f/6/f6058e7477adc07b6e7bb65332ad4327db3e9297.png)

徽标元素的样式与这里相同。

编辑：不使用任何组件时也是如此。

编辑#2：这是由 SVG 的 viewBox 引起的。如何让 SVG 与 Discourse 兼容？

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年五月4日 04:05 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/2 "2021-05-04T04:05:50Z")

</div>

> [@SettingDust](#):
>
> 这是由 SVG 的 viewBox 引起的。我如何让 SVG 与 Discourse 兼容？

也许可以尝试编辑 SVG 的 viewBox？根据截图，我猜尽管标志是 3:1 的比例，但 viewBox 却是 1:1？

---

<div class="post-metadata">

### Author: ![SettingDust](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/settingdust/32/218944_2.png) [@SettingDust](https://meta.discourse.org/u/SettingDust)
#### Post date: [2021年五月4日 04:06 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/3 "2021-05-04T04:06:30Z")

</div>

视口（viewbox）的宽高比为 3:1，在桌面端显示正常。

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年五月4日 04:19 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/4 "2021-05-04T04:19:49Z")

</div>

我尝试了几种方法，发现是 viewBox 导致了问题……如果我将这些值移到 height/width 中并移除 viewBox，那么在桌面端和移动端的显示效果就一致了。

因此，只需在文本编辑器中打开 SVG 文件，将第二行从：

`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">`

修改为：

`<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">`

我还需要进一步研究为什么在移动端会出现这种差异……

---

<div class="post-metadata">

### Author: ![SettingDust](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/settingdust/32/218944_2.png) [@SettingDust](https://meta.discourse.org/u/SettingDust)
#### Post date: [2021年五月4日 04:20 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/5 "2021-05-04T04:20:38Z")

</div>

当我将图片的 `max-height` 指定为 `height` 时没问题。但看起来生成了一个值，所以我认为这不是一个解决方案 😃

---

<div class="post-metadata">

### Author: ![SettingDust](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/settingdust/32/218944_2.png) [@SettingDust](https://meta.discourse.org/u/SettingDust)
#### Post date: [2021年五月4日 04:23 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/6 "2021-05-04T04:23:34Z")

</div>

看起来宽度和高度指定的是绝对值，而 viewBox 更像是“相对”值。没问题，非常感谢 😃

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [2021年六月3日 04:23 UTC](https://meta.discourse.org/t/why-is-my-mobile-logo-weird/189090/7 "2021-06-03T04:23:35Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.