配置 Android Web 应用程序

Question

iPhone 网络应用程序有四个可用的configuration features（不包括 HTML5 应用程序缓存）来配置当您将网页作为书签保存到主屏幕时网页的行为方式。

1. 您可以指定主页图标。
2. 您可以指定在网页加载时显示的启动图像。
3. 您可以隐藏浏览器 UI。
4. 您可以更改状态栏颜色。

这四个功能通过向

添加标签来工作，如下所示：

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

当然，这些“apple-”特定标签在 Android 中没有任何作用。但是有什么方法可以做等效的事情吗？ [至少，我希望用户能够将我的网页添加到他们的 Android 主屏幕（例如在 Android 2.0 中）并拥有漂亮的高分辨率图标。]

Answer 1

我们可以使用不同的元元素来获得最佳结果：

1. 首先我们需要为我们的应用设置视口：

   <meta name="viewport" content="width=device-width, initial-scale=1">
   

   这里有一个小技巧，适用于屏幕较高的设备（例如 iPhone 5）：

   <meta name="viewport" content="initial-scale=1.0">
   

   只需将它放在另一个元下面，它就会发挥所有作用。

2. 现在我们已经掌握了基础知识，我们将告诉移动浏览器“阅读”我们的网站，就好像它是一个应用程序一样。有两个主要的元元素：

   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   

   这将使我们的网站以全屏模式打开并设置默认状态栏的样式。

3. 我们已经完成了“行为”元元素，现在让我们从图标开始。图标和代码行的数量完全取决于您。对于启动图像，我更喜欢为每个分辨率创建一个图标，这样我的“加载器”在所有设备（主要是 Apple 设备）上的行为都相同。 我是这样做的：

   <!--iPhone 3GS, 2011 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">
   
   <!--iPhone 4, 4S and 2011 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x920.png" media="(max-device-width : 480px) and (-webkit-min-device-pixel-ratio : 2)">
   
   <!--iPhone 5 and 2012 iPod Touch-->
   <link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-640x1096.png" media="(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)">
   
   <!--iPad landscape-->
   <link rel="apple-touch-startup-image" sizes="1024x748" href="../images/mobile-icon-startup-1024x768.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : landscape)">
   
   <!--iPad Portrait-->
   <link rel="apple-touch-startup-image" sizes="768x1004" href="../images/startup-768x1004.png" media="screen and (min-device-width : 481px) and (max-device-width : 1024px) and (orientation : portrait)">
   

   注意：格式必须是PNG，并且必须遵守所有尺寸，否则将不起作用。

4. 最后，我们还需要为我们的应用添加一些图标。该图标将显示在设备菜单上。我是这样做的：

   <!--iPhone 3GS, 2011 iPod Touch and older Android devices-->
   <link rel="apple-touch-icon" href="../images/mobile-icon-57.png">
   
   <!--1st generation iPad, iPad 2 and iPad mini-->
   <link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">
   
   <!--iPhone 4, 4S, 5 and 2012 iPod Touch-->
   <link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">
   
   <!--iPad 3rd and 4th generation-->
   <link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">
   

   注意：您也可以使用“预组合”来使您的图标不显示为 iOS 反射光泽。只需在定义 rel 的地方添加这个词：

   <link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">
   

如前所述，这在 Apple 设备上效果更好。但该应用图标已在 Android 设备上得到验证，并且可以正常工作。

Answer 2

这是一个过时的问题，因此答案已更改。 较新的 android 上的 Chrome 有它自己的元标记。 确保您添加到主屏幕，然后从主屏幕启动。 普通书签是不够的。 Chrome 目前使用了一些 apple 指令，但底部的三个是 android 魔法。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="startup.png">
<link rel="apple-touch-icon" href="youricon.png"/>
<link rel="apple-touch-icon-precomposed" sizes="128x128" href="youricon.png">

<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="youriconhighres.png">
<link rel="shortcut icon" sizes="128x128" href="youricon.png">

Answer 3

我在三星 Galaxy S1 上尝试了上述方法

对我不起作用...但起作用的是首先创建一个书签，然后将该书签添加为我家的快捷方式。这样做会导致使用正确的图标。

Answer 4

读者可能会感兴趣：

http://code.google.com/p/android/issues/detail?id=7657

在 2.1-update1 中，在 Droid 上，我假设其他 2.* OS 手机，在向主屏幕添加书签时，如果链接 rel="apple-touch-icon" 或apple-touch-icon-precomposed 有一个完整的 url 路径。

Answer 5

当您在主屏幕上创建书签的快捷方式时，Android 将使用apple-touch-icon-precomposed（如果存在）（但不是apple-touch-icon）作为高分辨率图标：

<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>

至于其他功能，我认为目前没有任何方法可以做到这一点，除非发布一个 Android 应用程序作为您网站的包装器。