Question

默认情况下，当将网站“加入书签”作为图标时（通过从Safari的“+”菜单中选择添加到主屏幕），图标名称默认为到页面的<title>，截断为12个字符。

与apple-touch-icon允许您指定自己的图标化页面表示的方式非常相似，网页是否可以指定除<title>之外的默认图标名称？

Answer 1

在iOS 6中，这是通过元标记解决的：

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

正如cwap正确评论：它现在是官方文件。以下是为网络应用设置meta代码的所有信息：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 2

对于iOS：

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

对于Android：

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

Answer 3

为了在所有版本的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 +。

Answer 4

似乎没有任何方法可以使用元标记或类似的东西来做到这一点。我的建议是使用服务器端逻辑为iPhone提供不同的标题。例如，在php中你可以这样做：

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

Answer 5

这就是我为我的虚构客户“Super Epic Resort Hotels”所做的工作，其缩写名称“SERH”可以适合iOS主屏幕图标名称限制。（顺便说一句，限制似乎是基于字符数（我的iPad上的13）和渲染的宽度。）

用个字符填充名称，直到达到限制为止。在我的情况下，9似乎已经足够了，但你总是可以添加更多以防万一。

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

将页面添加到主屏幕时，Safari建议使用名称：

SERH

这是行为

SERH ???????????????????????????

但是用户不会注意到它们，因为字符在iOS上是不可见的并且不占用空间，直到用户尝试对该名称进行退格。在我的情况下，用户必须退格9次才能退回“SERH”。

修改：与上面的qmega解决方案结合使用，因为在非iOS设备上查看时可能会看到字符。

Answer 6

对于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。

Answer 7

您可以参考以下网址来设置图标和名称： 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

Answer 8

我认为safari不会允许你在任何页面制作你的主页结尾没有使用任何搜索引擎作为你的主页

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

8 个答案: