我正在开发一个基于HTML 5的应用程序,当我在Android上创建主屏幕快捷方式时,其应用程序图标会变成默认的书签图标或fav-icon +书签图标。如何像在iPhone中一样为Android指定应用程序图标?
是否有适用于Android的标签来指定应用程序图标?
我正在开发一个基于HTML 5的应用程序,当我在Android上创建主屏幕快捷方式时,其应用程序图标会变成默认的书签图标或fav-icon +书签图标。如何像在iPhone中一样为Android指定应用程序图标?
是否有适用于Android的标签来指定应用程序图标?
看一下这段代码。由元标记设置。
<!-- *** 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 -->
使用 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();">启动主页</a>
</body>
</html>
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>
适用于最新的 Android Chrome 应用程序(版本 35)。
添加https://stackoverflow.com/users/67606/pablo-santa-cruz的答案,这样也应该与 iOS 兼容(我不再拥有任何 iOS 设备,所以无法百分之百确认)。