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

61

默认情况下,当在Safari的“+”菜单中选择添加到主屏幕时,“书签”网站的图标名称默认为页面的<title>,被截短至12个字符。

apple-touch-icon类似,它允许您指定网页的自定义图标,是否有一种方法可以让网页指定除其<title>之外的默认图标名称?


我不这么认为。你有查看移动 Safari 开发指南吗? - Brian Driscoll
Brian,我在苹果公司公开发布的操作指南和指导手册中没有看到任何参考资料。 - pilcrow
我能想到的唯一方法就是在服务器端编写一些逻辑,以便在向 iPhone 提供服务时发送不同的标题。 - qmega
8个回答

214

3
看起来这只适用于iOS 6。我的iPhone 4S上装有iOS 5.1.1,它无法使用。 - davidjb
5
@davidjb 是的,这就是答案所说的。谢谢你的强调。 - Maarten Wolzak
我在苹果文档中找不到这个?有源链接吗?这在iOS8中是否仍然适用? - ProblemsOfSumit
2
@Sumit 你说得对,这个在文档中没有提到。由于未被记录在案,你应该做好没有它的准备。但它仍然可以在iOS 8和8.1中使用。 - Maarten Wolzak
1
我在官方文档中找到了这个条目,其中记录了apple-mobile-web-app-title的详细信息:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - cwap

20

对于iOS:

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

对于安卓(Android):

<meta name="application-name" content="Short name">

它在iOS和Android上都能工作,但在Firefox浏览器中无法工作。 - Guru

4

为了实现在所有版本的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;
}

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

2

似乎没有任何方法可以使用元标签或其他方式来完成此操作。我的建议是使用服务器端逻辑给iPhone设备一个不同的标题。例如,在php中,您可以做如下操作:

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

1
您可能还应考虑iPod touch和iPad。 - BoltClock
好的,已经修正为“iP”。我认为没有其他任何东西会在UA中发送它。 - qmega

2
这是我为虚构客户“超级史诗度假酒店”(缩写名称为“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的名称,但用户不会注意到它们,因为在iOS上,& #xFFFF;字符在视觉上是不可见的,不占据任何空间,直到用户尝试回退名称。在我的情况下,用户必须回退9次才能回退“SERH”。
编辑: 与qmega的解决方案结合使用,因为￿字符在非iOS设备上查看时可能可见。

1

对于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";
}

最好使用JQuery将此附加到body onload。

1

0

我认为Safari不允许你将任何页面设为主页,最终将任何搜索引擎设为主页也没有什么用处。


谢谢,@Ahmad。我觉得这并没有完全回答问题。 - pilcrow

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接