默认情况下,当在Safari的“+”菜单中选择添加到主屏幕时,“书签”网站的图标名称默认为页面的<title>
,被截短至12个字符。
与apple-touch-icon
类似,它允许您指定网页的自定义图标,是否有一种方法可以让网页指定除其<title>
之外的默认图标名称?
默认情况下,当在Safari的“+”菜单中选择添加到主屏幕时,“书签”网站的图标名称默认为页面的<title>
,被截短至12个字符。
与apple-touch-icon
类似,它允许您指定网页的自定义图标,是否有一种方法可以让网页指定除其<title>
之外的默认图标名称?
<meta name="apple-mobile-web-app-title" content="Short name">
正如cwap所评论的那样:现在已经是官方文档了。这里是有关设置Web应用程序的标签的所有信息:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
对于iOS:
<meta name="apple-mobile-web-app-title" content="Short name">
对于安卓(Android):
<meta name="application-name" content="Short name">
为了实现在所有版本的iOS上更好的跨兼容性,您可以使用以下答案的组合(灵感来自https://dev59.com/z3A75IYBdhLWcg3wPmd8#13838563):
将以下内容放入您的iOS 6+文档中:
<meta name="apple-mobile-web-app-title" content="Short name">
并且可以使用此标签的内容作为其他不直接支持此标签的iOS版本的标题:
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
document.title = document.getElementsByName('apple-mobile-web-app-title')[0].content;
}
似乎没有任何方法可以使用元标签或其他方式来完成此操作。我的建议是使用服务器端逻辑给iPhone设备一个不同的标题。例如,在php中,您可以做如下操作:
<title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?></title>

字符填充名称,直到达到限制。 在我的情况下,9个字符似乎就足够了,但您可以随时添加更多以防万一。<title>SERH - Super Epic Resort Hotels</title>
对于iOS 6,请使用Maarteen的解决方案。为了与iOS 5兼容,您也可以使用JS更改标题:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/iPad/i))
{
document.title = "Short Title";
}
<link rel="apple-touch-icon" href="/custom_icon.png"> // For icon
<meta name="apple-mobile-web-app-title" content="Short name"> // For name
我认为Safari不允许你将任何页面设为主页,最终将任何搜索引擎设为主页也没有什么用处。