为移动Safari设置“主屏幕”图标名称

默认情况下,当将网站标记为图标时(通过从Safari的“+”菜单中select添加到主屏幕 ),图标名称默认为页面的<title> ,截断为12个字符。

apple-touch-icon允许您指定自己的页面的图标化表示方式一样,网页是否可以指定除<title>之外的默认图标名称?

在iOS 6中,这是用一个meta标签解决的:

 <meta name="apple-mobile-web-app-title" content="Short name"> 

正如cwap正确地评论:现在是正式文件。 以下是关于设置networking应用meta标记的所有信息: 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://stackoverflow.com/a/13838563/1048705 ):

将其放置到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; } 

请注意,JavaScript将更改所有iOS客户端的标题,包括iOS 6+。

似乎没有任何方法可以用meta标签或类似的东西来做到这一点。 我的build议是使用服务器端逻辑给iPhone不同的标题。 例如,在PHP中,你可以做这样的事情:

 <title><?php echo strpos($_SERVER['HTTP_USER_AGENT'], 'iP')?'iDevice title':'normal title'; ?></title> 

这是我为我虚构的客户端“超级史诗度假村酒店”(缩写为“SERH”)可以适合iOS主屏幕图标名称限制的工作方式。 (顺便说一下,限制似乎是基于字符数(我的iPad上的13)和渲染的宽度。)

&#xFFFF; 字符,直到达到极限。 在我的情况下,9似乎是足够的,但你可以添加更多,以防万一。

 <title>SERH&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF;&#xFFFF; - Super Epic Resort Hotels</title> 

将页面添加到主屏幕时,Safari会提示名称:

SERH

这是行之有效的

SERH

但用户不会注意到他们,因为&#xFFFF; 字符在iOS上是不可见的,并且不会占用空间,直到用户尝试回退名称。 在我的情况下,用户必须退后9次才能退出“SERH”。

编辑: 与上面的qmega的解决scheme一起使用 ,作为&#xFFFF; 在非iOS设备上查看时可能会看到字符。

您可以参考下面的URL设置图标和名称: https : //developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

在头上添加下面的代码:

 <link rel="apple-touch-icon" href="/custom_icon.png"> // For icon <meta name="apple-mobile-web-app-title" content="Short name"> // For name 

对于iOS 6,请使用Maarteen的解决scheme。 为了与iOS 5兼容,您还可以使用JS更改标题:

 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i)) { document.title = "Short Title"; } 

可能最好使用JQuery将其附加到body onload。