15

apple-mobile-web-app-titleandroid web 应用程序是否有相当于 iOS 6 元标记？可以让您定义长标题和短标题的东西。

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

4 回答 4

6

这可以使用“应用程序名称”元标记来实现。然而，它似乎只适用于 chrome。Firefox 和 android 浏览器不使用标题标签

<head> ...  <meta name="application-name" content="Awesome App!"> ...  </head>

来自，Web 应用程序中的用法部分
http://w3c-webmob.github.io/installable-webapps/

于 2015-03-05T12:21:54.367 回答
2

创建一个名为 的 JSON 文件site.webmanifest，如下所示：

{
  "name": "Long name",
  "short_name": "Short name",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

然后将其添加到您的 HTML 中，如下所示：

    <link rel="manifest" href="/site.webmanifest">

该"icons"部分与您的问题无关，但您可能也应该包括它们（并实际制作这些图标文件）。我从这篇文章中得到了这个：https ://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

于 2021-10-21T06:09:13.950 回答
0

一种方法是使用 javascript 检测移动浏览器，然后将document.title更改为更短的标题：

if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android|Silk)/gi))
   document.title = "Short Title";
于 2015-12-14T21:54:26.790 回答
0

自 M39 以来，Chrome 已为您的 Web 应用程序添加了对基于 JSON 的清单文件的支持。该字段short_name等同于 Safari 的字段apple-mobile-web-app-title，因为它在空间有限的情况下更适合显示全名，例如应用程序启动器。

short_nameWeb 应用清单文件中字段的W3C 规范：

short_name 成员是一个字符串，表示 Web 应用程序名称的简短版本。它旨在用于没有足够空间显示 Web 应用程序的全名的情况。

于 2015-09-03T05:07:46.257 回答