web-dev-qa-db-ja.com

モバイルSafariの「ホーム画面」アイコン名の設定

デフォルトでは、Webサイトをアイコンとして「ブックマーク」するとき（Safariの"+"メニューからホーム画面に追加を選択）、アイコン名はデフォルトでページの<title>、12文字に切り捨てられます。

Apple-touch-iconでページのアイコン化された表現を指定できるのとほぼ同じ方法で、Webページで<title>以外のデフォルトのアイコン名を指定する方法はありますか？

iphonesafariiconsmobile-safari
55
pilcrow

IOS 6では、これはメタタグで解決されます。

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

As cwap が正しくコメントしました：公式ドキュメントになりました。 Webアプリのmetaタグの設定に関するすべての情報は次のとおりです。 https://developer.Apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ WebApplications.htmlの構成

207
Maarten Wolzak

IOSの場合：

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

アンドロイド用：

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

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 6以降を含むすべてのiOSクライアントのタイトルを変更することに注意してください。

4
davidjb

メタタグなどでこれを行う方法はないようです。私の提案は、サーバー側のロジックを使用して、iPhoneに別のタイトルを付けることです。たとえば、phpでは次のようなことができます。

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

アイコンと名前の設定については、以下の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
1
hectk

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に添付するのが最善です。

1
NickG

サファリでは、検索エンジンをあなたのホームページにすることは最終的にはあなたのページをあなたのホームページにすることを許可しないと思います

0
Ahmad Ebrahim