当前位置：文江博客话题详情

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

发布于 2024-09-12 21:22:07 字数 243 浏览 4 评论 0原文

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

与 apple-touch-icon 让您指定自己的页面图标化表示方式大致相同，网页是否可以指定除其 之外的默认图标名称。标题>？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

澜川若宁 2024-09-19 21:22:08

对于 iOS：

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

对于 Android：

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

For iOS:

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

For Android:

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

回复收藏 0 原文

樱娆 2024-09-19 21:22:08

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

For better cross-compatibility on all versions of iOS, you could use a combination of answers (inspired by https://stackoverflow.com/a/13838563/1048705):

Place this into your document for iOS 6+:

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

and use this tag's content for the title for other iOS versions that don't support the tag directly:

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
    document.title = document.getElementsByName('apple-mobile-web-app-title')[0].content;
}

Note that the JavaScript will change the title for all iOS clients, including iOS 6+.

回复收藏 0 原文

找回味觉 2024-09-19 21:22:08

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

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

There doesn't seem to be any way to do this with meta tags or anything like that. My suggestion would be to use server-side logic to give iPhones a different title. For example, in php you could do something like this:

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

回复收藏 0 原文

留一抹残留的笑 2024-09-19 21:22:08

这就是我为我的虚构客户“Super Epic Resort Hotels”解决这个问题的方法，其缩写名称“SERH”可以满足 iOS 主屏幕图标名称限制。（顺便说一句，该限制似乎基于字符数（我的 iPad 上为 13）和渲染宽度。）

用字符填充名称，直到达到限制。就我而言，9 似乎就足够了，但您可以随时添加更多，以防万一。

<title>SERH - Super Epic Resort Hotels</title>

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

SERH

实际上是

SERH......

但用户不会注意到它们，因为字符在 iOS 上不可见并且不占用空间，直到用户尝试退格名字。就我而言，用户必须退格 9 次才能退格“SERH”。

编辑：将此与上面的 qmega 解决方案结合使用，因为在非 iOS 设备上查看时，字符可能会可见。

This is how I worked around it for my fictional client, "Super Epic Resort Hotels", which abbreviated name "SERH" can fit the iOS home screen icon name limit. (By the way, the limit seems to be based both on character count (13 on my iPad) and the rendered width.)

Pad the name with characters until it reaches the limit. In my case, 9 seems to be sufficient but you can always add more just in case.

<title>SERH - Super Epic Resort Hotels</title>

When adding the page to the home screen, Safari suggests the name:

SERH

which is actaully

SERH

but the user won't notice them, as the characters are invisible on iOS and take up no space, until the user tries to backspace the name. In my case, the user has to backspace 9 times before he/she can backspace "SERH".

Edit: Use this in conjunction with qmega's solution above, as the characters might be visible when viewed on non-iOS devices.

回复收藏 0 原文

清风不识月 2024-09-19 21:22:08

对于 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 将其附加到正文加载。

For iOS 6, use Maarteen's solution. For compatibility with iOS 5, you can also change the title using JS:

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

Probably best to attach this to body onload using JQuery.

回复收藏 0 原文

愿与i 2024-09-19 21:22:08

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

You can refer below URL for setting icon and name :
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

In head add below code :

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

回复收藏 0 原文

百思不得你姐 2024-09-19 21:22:08

我认为 safari 不会允许你将任何页面设为你的主页，最后将任何搜索引擎设为你的主页是没有用的

回复收藏 0 原文

深白境迁sunset 2024-09-19 21:22:07

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

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

正如 cwap 正确评论的那样：它现在是官方文档。以下是有关为 Web 应用设置 meta 标记的所有信息：https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

In iOS 6 this is solved with a meta tag:

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

As cwap rightly commented: It's now official documentation. Here's all the info on setting meta tags for web apps: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

回复收藏 0 原文

~没有更多了~

关于作者

下雨或天晴

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

qq_FjTq5B

18273202778

WordPress小学生

〃温暖了心ぐ

迷乱花海

niuniu

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。