配置的Android Web应用程序

Question

iPhone Web应用程序有四个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主屏幕（例如，在安卓2.0），并有一个漂亮的高分辨率图标]

Answer 1

这是一个过时的问题，因为这样的答案已经改变。 Chrome在较新的Android上有它自己的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"> 

Answer 2

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

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

至于特征的休息，我不认为有任何的方式在做这个目前未发布可充当您网站封装的Android应用程序。

Answer 3

这可能会感兴趣的读者：

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

在2.1 UPDATE1，对Droid的，和我相信其他2 *操作系统的手机，添加书签到主屏幕时，如果链接rel =“apple-touch-icon”或apple-touch-icon-precomposed具有FULL url路径，则主屏幕仅显示自定义图标。

Answer 4

我尝试了上面从我的三星Galaxy S1

并没有为我工作...但没有工作首先创建一个书签，然后补充说，书签作为快捷方式我的家。这样做会导致使用正确的图标。

Answer 5

有迹象表明，我们可以用它来实现可能的最好的结果不同的meta元素：

1A）首先，我们需要设置视口为我们的应用程序是这样：
<meta name="viewport" content="width=device-width, initial-scale=1">

1b）这里有一个小黑客，对于屏幕较高的设备（例如iPhone 5）：
<meta name="viewport" content="initial-scale=1.0">
只要把它放在另一个元，它会做所有的魔术。

2）现在我们已经掌握了基本知识，我们会告诉移动浏览器“阅读”我们的网站，就像它是一个应用程序一样。主要有两个meta元素：
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
这将使我们的网站，在全屏幕模式和风格的默认状态栏打开。

3）我们完成了“行为”meta元素，现在让我们开始使用我们的图标。图标和代码行的数量将完全取决于您。对于启动映像，我最好为每个分辨率创建一个图标，以便我的“加载程序”在所有设备（主要是Apple设备）上的行为相同。 我是这样做的：

*<!--iPhone 3GS, 2011 iPod Touc-->* <br> 
`<link rel="apple-touch-startup-image" href="../images/mobile-icon-startup-320-460.png" media="screen and (max-device-width : 320px)">` <br> 

*<!--iPhone 4, 4S and 2011 iPod Touch-->* <br> 
`<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)">` <br> 

*<!--iPhone 5 and 2012 iPod Touch-->* <br> 
`<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)">` <br> 

*<!--iPad landscape-->* <br> 
<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)"> <br> 

*<!--iPad Portrait-->* <br> 
`<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)">` <br> <br> 

注意：格式必须是PNG和所有的大小必须得到尊重，否则将无法正常工作。

4）要完成，我们还需要为我们的应用程序一些图标。该图标将显示在设备菜单上。以下是我做的：

*<!--iPhone 3GS, 2011 iPod Touch and older Android devices-->* <br> 
`<link rel="apple-touch-icon" href="../images/mobile-icon-57.png">` <br> 

*<!--1st generation iPad, iPad 2 and iPad mini-->* <br> 
`<link rel="apple-touch-icon" sizes="72x72" href="../images/mobile-icon-72.png">` <br> 

*<!--iPhone 4, 4S, 5 and 2012 iPod Touch-->* <br> 
`<link rel="apple-touch-icon" sizes="114x114" href="../images/mobile-icon-114.png">` <br> 

*<!--iPad 3rd and 4th generation-->* <br> 
`<link rel="apple-touch-icon" sizes="144x144" href="../images/mobile-icon-144.png">` <br> 

注意：您还可以使用“预组合”为你的图标不与iOS反射光泽显示。只需添加这个词，可以定义相对像这样：
<link rel="apple-touch-icon-precomposed" href="../images/mobile-icon-57.png">

至于说，这个工程更好地在苹果设备。但应用程序图标已在Android设备上得到验证，并且适用于。