Android Web 应用程序图标被切掉边缘答案

【问题标题】：Android web app icon being cut off the edgesAndroid Web 应用程序图标被切掉边缘
【发布时间】：2016-07-19 11:16:07
【问题描述】：

我正在制作一个网络应用程序，当我在我的 android 设备上“添加到主屏幕”时，我的应用程序图标没有正确显示。下面是它的截图，下面是图标的真正样子：

这是我网站 head 标签内的代码：

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

【问题讨论】：

网页的head标签对启动器来说是不可见的，所以一定有什么东西可以为你的应用程序生成一个图标。这是什么？
我不知道。这里：developer.chrome.com/multidevice/android/installtohomescreen 它说如果我在脑海中设置链接标签并在浏览器中按“添加到主屏幕”，它将在我的 android 设备的主屏幕中显示图标
在那种情况下，我误解了你的问题。我以为您的意思是您已将网页转换为 Android 应用程序...

标签： android html google-chrome web-applications android-launcher

【解决方案1】：

正如此处 (https://www.google.com/design/spec/style/icons.html#icons-system-icons) 所解释的，图标尺寸可能是 48dp（对于密集布局来说至少是这样！）。

之后，最大尺寸是相对于用户启动器...

我不知道 px 中的“完美”尺寸是多少（相对于屏幕而言），但您可以尝试将其调整为 48/48（并替换“sizes”属性）

【讨论】：

我关注了这篇文章，这里推荐 192px 乘以 192px。我尝试制作图像并将 size 属性替换为较小的数字，但图标变得非常小
好吧，我不太了解……那你的设备是什么？您使用自定义启动器吗？问题可能来自这里...您可以在活动代码中设置图标吗？用android Studio导入（它会以不同的大小存储，用于不同的视口），我认为这是最好的解决方案，因为它支持更多的设备......

【解决方案2】：

在Add to Homescreen 页面上看了一会儿，但它并没有真正提到图标如何缩放的任何行为，但我找到了一个关于How to Add Icons 的教程，在这里，它提到了创建可供所有人使用的图像屏幕尺寸：

如果您不想创建所有这些图像，您至少应该创建更大分辨率的图像。这样它们在高分辨率设备上看起来会很好。较旧的设备将加载与其所需尺寸最接近的可用尺寸并将其缩小（这可行，但如果您想要完全控制和最快下载，这并不理想）。

据此，您可以假设图标必须根据屏幕尺寸自动缩小。我对此不太确定，但也许是什么导致您的图标无法正确缩放是因为您的<link..> 中的rel 属性不正确？根据您的代码，它显示为rel="shortcut icon"，而根据添加到主屏幕 文档，它应该是rel="icon"。

此外，需要配置来支持主屏幕启动，您可以在其中添加一些<meta>标签，如下所示（来自添加到主屏幕文档）：

<!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>

请尝试一下，如果它有效，请告诉我。希望这会有所帮助。祝你好运

【讨论】：

【解决方案3】：

在运行 Android 4.4.2 Jelly Bean 的特定设备上，我发现当图标大于 92x92 时，主屏幕图标会被截断，即使也提供了 92x92。

因此，只有这样才能在 Jelly Bean 设备上生成一个漂亮的图标。

<link rel="icon" sizes="92x92" href="/favicon-92.png">

但以下内容会导致在果冻豆设备上使用 favicon-128.png，并裁剪右侧和底部。但是，这确实适用于较新版本的 Android，因为它应该。

<link rel="icon" sizes="128x128" href="/favicon-128.png">
<link rel="icon" sizes="92x92" href="/favicon-92.png">

由于我的网络应用程序针对的是运行 Jelly Bean 的特定设备，因此我决定只提供 92x92 图标。对于一般网站，我建议关注 Google's advice 并提供低分辨率和高分辨率图标，这可能会导致 Jelly Bean 设备出现问题。

【讨论】：

【解决方案4】：

当您使用 Android Studio 调整徽标大小时，它们具有缩放功能。

要调整徽标的大小：

1：右键单击应用文件夹 2：将鼠标悬停在“新建”上并点击“创建图片资源”

然后用这个工具调整大小：

【讨论】：