配置 Android Web 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1951381/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Configuring Android Web Applications
提问by Dan Fabulich
iPhone web apps have four configuration featuresavailable (not including the HTML5 application cache) to configure how web pages behave when you save the web page to the home screen as a bookmark.
iPhone 网络应用程序有四个可用的配置功能（不包括 HTML5 应用程序缓存）来配置当您将网页作为书签保存到主屏幕时网页的行为方式。
- You can specify the home page icon.
- You can specify a startup image that displays while the web page is loading.
- You can hide the browser UI.
- You can change the status bar color.
- 您可以指定主页图标。
- 您可以指定在加载网页时显示的启动图像。
- 您可以隐藏浏览器 UI。
- 您可以更改状态栏颜色。
The four features work by adding tags to the <head> like this:
这四个功能通过向 <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" />
Naturally, none of these "apple-" specific tags do anything in Android. But is there any way to do something equivalent? [At a minimum, I want users to be able to add my web page to their Android home screen (e.g. in Android 2.0) and have a pretty hi-res icon.]
自然，这些“apple-”特定标签在 Android 中没有任何作用。但是有没有办法做一些等效的事情？[至少，我希望用户能够将我的网页添加到他们的 Android 主屏幕（例如在 Android 2.0 中）并拥有一个漂亮的高分辨率图标。]
采纳答案by David C
This is a dated question, as such the answer has changed. Chrome on newer androids has it's own meta tags for this. Make sure you Add to the Homescreen, and launch from the homescreen. A normal bookmark is not sufficient. Chrome currently uses a few of the apple directives, but the three at the bottom are the android magic.
这是一个过时的问题，因此答案已更改。较新的 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">
回答by Trevor Johns
When you create a shortcut on the home screen to a bookmark, Android will use a apple-touch-icon-precomposedif present (but not apple-touch-icon) as a high-res icon:
当您在主屏幕上创建书签的快捷方式时，Android 将使用apple-touch-icon-precomposedif 存在（但不是apple-touch-icon）作为高分辨率图标：
<link rel="apple-touch-icon-precomposed" href="/custom_icon.png"/>
As for the rest of the features, I don't think there's any way to do this at present without publishing an Android app that acts as a wrapper for your website.
至于其他功能，我认为目前没有任何方法可以在不发布充当网站包装器的 Android 应用程序的情况下执行此操作。
回答by adam.lofts
This may be of interest to readers:
这可能是读者感兴趣的：
http://code.google.com/p/android/issues/detail?id=7657
http://code.google.com/p/android/issues/detail?id=7657
In 2.1-update1, on the Droid, and I presume other 2.* OS phones, when adding a bookmark to the homescreen, the homescreen only displays a custom icon if the link rel="apple-touch-icon" or apple-touch-icon-precomposed have a FULL url path.
在 2.1-update1 中，在 Droid 上，我假设其他 2.* 操作系统手机，将书签添加到主屏幕时，如果链接 rel="apple-touch-icon" 或 apple-touch，则主屏幕仅显示自定义图标-icon-precomposed 有一个完整的 url 路径。
回答by julianb
I tried the above from my Samsung Galaxy S1
我在我的三星 Galaxy S1 上尝试了上述方法
Didn't work for me... but what did work was first creating a bookmark and then adding that bookmark as a shortcut to my home. Doing this caused the correct icon to be used.
对我不起作用……但是起作用的是首先创建一个书签，然后将该书签添加为我家的快捷方式。这样做会导致使用正确的图标。
回答by Javier Viola
There are different meta elements that we can use to achieve the best results possible:
我们可以使用不同的元元素来实现最佳结果：
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.
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.
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.
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">
首先，我们需要为我们的应用程序设置视口：
<meta name="viewport" content="width=device-width, initial-scale=1">对于屏幕较高的设备（例如 iPhone 5），这里有一个小技巧：
<meta name="viewport" content="initial-scale=1.0">只需将它放在另一个元下，它就会发挥所有作用。
现在我们有了基础知识，我们将告诉移动浏览器“阅读”我们的网站，就像它是一个应用程序一样。有两个主要的元元素：
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">这将使我们的网站以全屏模式打开并设置默认状态栏的样式。
我们已经完成了“行为”元元素，现在让我们从我们的图标开始。图标和代码行的数量将完全取决于您。对于启动图像，我更喜欢为每个分辨率创建一个图标，以便我的“加载程序”在所有设备（主要是 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，并且必须遵守所有尺寸，否则将无法工作。
最后，我们的应用程序还需要一些图标。此图标将显示在设备菜单上。这是我如何做到的：
<!--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">
As said, this works better on Apple devices. But the app icon has been proved on Android devices and it works to.
如前所述，这在 Apple 设备上效果更好。但是该应用程序图标已在 Android 设备上得到验证并且可以正常工作。
