logo标签列表

配置 Android 网页应用程序

htmlandroidbookmarks
66

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

  1. 您可以指定主页图标。
  2. 您可以指定在加载网页时显示的启动图像。
  3. 您可以隐藏浏览器用户界面。
  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中）并拥有一个漂亮的高分辨率图标。]

5个回答
46

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

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

至于其他功能，我认为目前没有办法在不发布作为您网站包装的 Android 应用程序的情况下实现此操作。

3
这似乎在HTC Evo上无法正常工作；它可能在任何HTC Sense UI设备上都无法正常工作。 - Dan Fabulich
1
如果您禁用HTC Sense启动器并改用AOSP启动器，则应该可以正常工作。（实际上，HTC Sense设备实际上安装了两个启动器。）无论如何，感谢您的反馈。这很有用。我已经提交了一个错误报告，以便将其作为Android CDD未来版本的候选项进行审查。（b/2811198） - Trevor Johns
2
我刚试了一下我的Nexus7 - 但是没有成功。显示一个丑陋的书签图标，中间太小的网站图标... :( - Philipp Kyeck
这将为您提供一个图标，但它不会在没有浏览器UI的独立模式下启动应用程序，请参阅我的答案以了解如何实现。 - David C
31

这是一个过时的问题，因此答案已经发生了变化。 较新的Android系统上的Chrome浏览器有自己的meta标签。 确保将其添加到主屏幕，并从主屏幕启动。 普通书签不足以满足要求。目前，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">
22

以下内容可能会对读者感兴趣：

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

在2.1-update1版本的Droid手机上，以及我猜其他2.*操作系统的手机上，在向主屏添加书签时，只有当链接中的rel属性为“apple-touch-icon”或“apple-touch-icon-precomposed”并且具有完整URL路径时，主屏才会显示自定义图标。

我的书签网页应用需要哪种尺寸的 Android 图标？或许对于苹果来说，可以使用以下尺寸：320x460、640x920、640x1096、72x72、114x114、144x144、768x1004、1024x748。 - Kiquenet
根据 _https://developer.chrome.com/multidevice/android/installtohomescreen_，Android 的尺寸为 36x36、48x48、72x72、96x96、144x144、192x192，也许还有 128x128。 - Kiquenet
3

有不同的元素可以使用来实现最佳结果:

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

正如所说，这在苹果设备上的效果更好。但是该应用程序图标已在Android设备上得到验证，并且也可以使用。

我的书签 Web 应用需要为 Apple 使用哪种尺寸的图标？320x460、640x920、640x1096、72x72、114x114、144x144、768x1004、1024x748？那么，对于 Android 呢？ - Kiquenet
对于苹果设备，sizes="57x57" sizes="114x114" sizes="72x72" sizes="144x144" sizes="60x60" sizes="120x120" sizes="76x76" sizes="152x152" 是根据 https://css-tricks.com/favicon-quiz/ 的规定。 - Kiquenet
根据_https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP40006556-CH27_，苹果(Web clip icon)的尺寸为76x76、120x120、152x152、167x167、180x180。 - Kiquenet
2

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

对我来说没有用...但是有效的方法是首先创建一个书签，然后将该书签添加为我的主屏幕快捷方式。这样做会使用正确的图标。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接