Android 被切断边缘的 web 应用程序图标

发布时间: 2017/3/17 21:47:58
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我正在做一个 web 应用程序,当我"添加到主屏幕"上我 android 被设备,我的应用程序的图标显示不正常。下面是它的屏幕截图,下面是什么图标真的应该看起来像︰

enter image description here

enter image description here

这是我已经在脑海里的代码 tag 的我的网站︰

<link rel="shortcut icon" sizes="192x192" href="mydomain.com/img/site-icon/nice-highres.png">

解决方法 1:

添加到主屏幕页面各处看了一会儿但它真的没有提到任何行为上如何缩放图标,但我发现有关如何添加图标和这里的教程,它提到了有关创建可用的图像,因为所有屏幕尺寸︰

如果你不想要创建所有这些图像,您至少应该创建更大分辨率的。这种方式在高分辨率的设备会很好看。旧设备将加载最接近的尺寸提供给他们所需的大小和缩减他们(这工作,但并不理想,如果你想要完全控制和最快的下载)。

从这个基础,你可以推断,图标必须自动按比例缩小屏幕大小。我不是很清楚,但也许什么原因造成您的图标到规模不正常是因为 rel 属性在你 <link..> 是不正确的?根据您的代码,它显示为 rel="shortcut icon" 根据添加到主屏幕doc,它应该是 rel="icon"

此外, configuration 需要支持桌面发布,您在其中添加一些 <meta> 标签,像这样 (从将添加到主屏幕 doc)︰

<!doctype html>
<html>
   <head>
     <title>Awesome app </title>
     <meta name="viewport" content="width=device-width">
     <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" sizes="192x192" href="/icon.png">
   </head>
   <body></body>
</html>

试试看,让我知道,如果它工作的关心。希望这有助于以某种方式虽然。祝你好运

官方微信
官方QQ群
31647020