AppStore，为什么网页版的应用图标会变形？答案

【问题标题】：AppStore, why app icon is distorted in web version?AppStore，为什么网页版的应用图标会变形？
【发布时间】：2021-02-04 10:58:31
【问题描述】：

自上次更新以来，Web 版 Appstore 中的图标以奇怪的方式拉伸。我没有更改我的图标已经两个版本。手机版图标是正确的，所以只有网页版有问题

【问题讨论】：

标签： xcode app-store app-store-connect

【解决方案1】：

哈哈哈，有意思，我查了一下这个页面的源码。

显示这张照片的 HTML 如下：

<picture id="ember145" class="we-artwork ember-view product-hero__artwork we-artwork--fullwidth we-artwork--ios-app-icon" data-test-product-hero-artwork="">
          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/230x0w.webp 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/460x0w.webp 2x" media="(min-width: 1069px)" type="image/webp">

          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/230x0w.png 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/460x0w.png 2x" media="(min-width: 1069px)" type="image/png">

          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/217x0w.webp 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/434x0w.webp 2x" media="(min-width: 735px)" type="image/webp">

          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/217x0w.png 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/434x0w.png 2x" media="(min-width: 735px)" type="image/png">

          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/246x0w.webp 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/492x0w.webp 2x" type="image/webp">

          <source class="we-artwork__source" srcset="https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/246x0w.png 1x, https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/492x0w.png 2x" type="image/png">
</picture>

当用 Chrome 加载这个页面时，https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/230x0w.webp 会使用这个 url，并且是错误的图像

和

当用 Safari 加载这个页面时，

https://is2-ssl.mzstatic.com/image/thumb/Purple124/v4/6c/64/15/6c64153a-bfb8-f201-ad96-6b7a7ce47505/AppIcon-1x_U007emarketing-0-8-0-85-220.png/246x0w.png，会使用这个url，是普通图片。

所以我认为这个页面在如何显示正确的应用程序图标方面存在浏览器兼容性问题。您可以联系 Apple 进行修改。

【讨论】：

【解决方案2】：

我已向 Apple 报告此错误

【讨论】：