Настройка значка "Домашний экран" для мобильного Safari

Ответ 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

Ответ 2

Для iOS:

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

Для Android:

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

Ответ 3

Для лучшей кросс-совместимости во всех версиях iOS вы можете использовать комбинацию ответов (вдохновленных fooobar.com/questions/100208/...):

Поместите это в свой документ для 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 +.

Ответ 4

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

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

Ответ 5

Вот как я работал вокруг этого для моего вымышленного клиента "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

который является actaully

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

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

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

Ответ 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

Ответ 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.