Question

我正在研究html 5应用程序，当我在android上制作主屏幕快捷方式时，其app图标获取默认书签图标或fav-icon +书签图标。如何为iPhone指定应用程序图标就像我们在iPhone中指定一样？

是否有任何标记为Android指定应用程序图标？

Answer 1

使用此：

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

Want more info?

Answer 2

看看这段代码。由meta标签设置。

<!-- ***  Written in HTML5 *** -->

<!-- Button - dialog - slidedown - inline + mini w/ checkmark -->
<span><a href='#' data-rel='dialog' data-transition='slidedown' data-role='button' data-icon='check' data-inline='true' data-mini='true' data-theme='b'>TEXT</a></span>
<!-- Button (blue) - inline (not the full width) -->
<span><a href='#' data-role='button' data-inline='true' data-theme='b'>TEXT</a></span>
<!--  Start a Listview -->
<ul data-role='listview' data-theme='c'>
<!--  List element as pseudo BACK button -->
<li data-theme='a'><a href='#'>Back</a></li>
<!--  List element with COUNT present -->
<li>TEXT<span class='ui-li-count'>VALUEGOESHERE</span></li>
<!--  List DIVIDER -->
<li data-role='list-divider'>Inventory</li>
<!--  Disable AJAX processing on FORM -->
<form data-ajax='false' method='post' action='#' id='form_name' name='form_name'>
<!--  Fixed FOOTER with ACTIVE links for NAVigation -->
<div data-role='footer' data-position='fixed' data-id='fixed-footer'>
    <div data-role='navbar'>
        <ul>
            <li><a href='#' class='ui-btn-active ui-state-persist'>TEXT</a></li>
            <li><a href='#'>TEXT</a></li>
        </ul>
    </div>
</div><!-- /footer -->
<!--  List with SEARCH and custom keyword: Search -->
<ul data-role='listview' data-filter='true' data-filter-placeholder='Search' data-theme='c'>
<!--  List element with extra keywords for searching -->
<li data-filtertext='KEYWORDS'><a href='#'>TEXT</a></li>
<!--  Hidden LABEL for input -->
<label for='input_name' class='ui-hidden-accessible'>TEXT</label>
<!--   -->

<!-- Common Header Info for HTML5 Mobile Web App -->
<!doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="en-us" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta NAME="robots" CONTENT="noindex, nofollow">
    <title>TEXT</title>
    <meta name="author" content="Mario Lurig - http://mariolurig.com/" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" /><!-- 129x129 -->
    <link rel="apple-touch-startup-image" href="/startup.png"><!-- 320x460 -->
</head> 

<!--  Input TYPEs for differing keyboards -->
<input type='date' name='date' id='date' value='2012-01-01' />
<input type='time' name='time' id='time' value='12:00:00' />
<input type='text' name='text' id='text' value='readonly' readonly /><!-- readonly can't be edited, MAYBE the same as disabled='disabled' -->
<input type='datetime-local' name='datetime-local' id='datetime-local' value='2012-01-01 12:00:00' />
<input type='url' name='url' id='url' placeholder='Enter URL' /><!-- placeholder automatically disappears when input begins or default value is present -->
<input type='email' name='email' id='email' autofocus /><!-- autofocus only added as an example; not required -->
<input type='tel' name='tel' id='tel' /> <!-- Keypad for integers only -->
<input type='number' name='number' id='number' /> <!-- numbers and symbols -->
<input type='range' name='range' id='range' min='0' max='50' /><!-- HTML5 slider, not as nice as jQueryMobile version -->

Answer 3

使用javascriptbridge

声明你的javascriptbridge

private class JavaScriptBridge {

  private Context mContext;

  public JavaScriptBridge(Context context) {
    mContext = context;
  }

  public void launchHome() {
    Intent intent = new Intent(Intent.ACTION_MAIN);
    intent.addCategory(Intent.CATEGORY_HOME);
    intent.addCategory(Intent.CATEGORY_DEFAULT);
    mContext.startActivity(intent);

  }
}

在webview实例中添加该桥的引用

mWebView.addJavascriptInterface(new JavaScriptBridge(theContext), "MyAndroidBridge");

html访问该按钮的方式

<html>
  <head>
    <script type="text/javascript">
      function launchHome() {
        if (typeof MyAndroidBridge === 'undefined') {
          alert('bridge not declared');
        } else {
         MyAndroidBridge.lauchHome();
        }
      }
    </script>
  </head>
  <body>
    <a href="javascript:launchHome();">Launch Home</a>
  </body>
</html>

Answer 4

2014年9月更新

<link rel="shortcut icon" sizes="196x196" href="icon-196x196.png">

最初，您需要允许Chrome for Android在设置中显示“添加到主屏幕”选项。

像

这样的起始模板

<!doctype html>
<html>
<head>
    <title>HTML5 app</title>
    <link rel="shortcut icon" sizes="128x128" href="./icns/1410745473_39412.ico">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
    <h1>Adventures in HTML5 android apps</h1>
</body>
<script type="text/javascript">
    navigator.standalone = navigator.standalone || (screen.height-document.documentElement.clientHeight<40)

    alert(navigator.standalone == true);
    alert(screen.height-document.documentElement.clientHeight)
</script>
</html>

使用最新的Chrome for Android应用（第35版）。

添加https://stackoverflow.com/users/67606/pablo-santa-cruz的答案，这也应该与iOS兼容（我不再拥有任何iOS设备，所以我不是百分百肯定的。）

如何为Android应用程序指定在主屏幕图标上添加快捷方式？

4 个答案: