64

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

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

这四个功能通过向 <head> 添加标签来工作，如下所示：

<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 中）并拥有漂亮的高分辨率图标。]

4

5 回答 5

45

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

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

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

于 2009-12-23T08:43:50.500 回答
28

这是一个过时的问题，因此答案已经改变。较新的 android 上的 Chrome 有它自己的元标记。确保您添加到主屏幕，然后从主屏幕启动。普通书签是不够的。Chrome 目前使用了一些苹果指令，但底部的三个是 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">
于 2013-11-27T22:33:42.593 回答
22

这可能是读者感兴趣的：

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 路径。

于 2010-10-04T21:16:25.370 回答
2

There are different meta elements that we can use to achieve the best results possible:

  1. First of all we need to set the viewport for our app as so:

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

    There is a little hack here, for devices with taller screens (iPhone 5 for example):

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

    Just put it under the other meta and it will do all the magic.

  2. Now that we have the basics, we will tell the mobile-browsers to "read" our website as if it was an app. There are two main meta elements:

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

    This will make our website to be opened in full-screen-mode and style the default status-bar.

  3. We are done with the "behaving" meta elements, now lets start with our icons. The amount of icons and code lines will depend totally on you. For the startup-image I prefered to create one icon for each resolution, so that my "loader" acts the same on all devices (mainly Apple devices). Here's how I did it:

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

    NOTE: The format must be PNG and all the sizes must be respected, otherwise it will not work.

  4. To finish, we will also need some icons for our app. This icon will be displayed on the devices menu. Here's how I did it:

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

    NOTE: You can also use "precomposed" for your icon not to be shown with iOS reflective shine. Just add this word where you define rel as so:

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

As said, this works better on Apple devices. But the app icon has been proved on Android devices and it works to.

于 2014-11-18T14:18:20.263 回答
2

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

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

于 2011-10-20T15:14:04.583 回答