Настройка названия значка «Главный экран» для мобильного Safari

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

Вот как я обошел это для своего вымышленного клиента «Super Epic Resort Hotels», чье сокращенное название «SERH» может соответствовать пределу имени значка на главном экране iOS. (Кстати, ограничение, похоже, основано как на количестве символов (13 на моем iPad), так и на визуализированной ширине.)

Дополните имя символами , пока оно не достигнет предела. В моем случае 9 кажется достаточным, но вы всегда можете добавить больше на всякий случай.

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

При добавлении страницы на главный экран Safari предлагает имя:

Serh

что на самом деле

Serh & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF;

но пользователь не заметит их, поскольку символы  невидимы на iOS и не занимают места, пока пользователь не попытается вернуться на обратное имя. В моем случае пользователь должен вернуться на 9 раз, прежде чем он сможет вернуться на «SERH».

Редактировать: Используйте это в сочетании с решением qmega выше , так как символы  могут быть видны при просмотре на устройствах не iOS.

Answer 5

Кажется, нет никакого способа сделать это с метатегами или чем-то подобным. Я бы предложил использовать серверную логику, чтобы придать айфонам другое название. Например, в php вы можете сделать что-то вроде этого:

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

Answer 6

Вы можете обратиться ниже 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

Answer 7

Для 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.

Answer 8

Я думаю, что Safari не позволит вам сделать какую-либо страницу вашей домашней страницей, в конце концов, нет никакого смысла делать какую-либо поисковую систему вашей домашней страницей