Настройка Веб-Приложений Android

при создании ярлыка на главном экране для закладки, Android будет использовать apple-touch-icon-precomposed если присутствует (но не apple-touch-icon) как значок высокого разрешения:

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

Что касается остальных функций, я не думаю, что есть какой-либо способ сделать это в настоящее время без публикации приложения для Android, которое действует как оболочка для вашего сайта.

Это может быть интересно читателям:

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

в 2.1-update1, на дроиде, и я предполагаю, что другие 2.* Телефоны ОС, при добавлении закладки на рабочий стол, рабочий стол отображает только пользовательский значок, если ссылка rel= "apple-touch-icon" или apple-touch-icon-precomposed имеют полный url-путь.

Я пробовал выше от моего Samsung Galaxy S1

не работает для меня... но то, что действительно сработало, сначала создало закладку, а затем добавило эту закладку в качестве ярлыка для моего дома. Это привело к использованию правильного значка.

существуют различные мета-элементов, которые мы можем использовать для достижения наилучших результатов:

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. мы закончили с" поведением " мета-элементов, теперь давайте начнем с наших иконок. Количество значков и строк кода будет полностью зависеть от вас. Для startup-image я предпочел создать один значок для каждого разрешения, так что мой "загрузчик" действует одинаково на всех устройствах (в основном устройств 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, и он работает.