모바일 Safari 용 "홈 화면"아이콘 이름 설정

모바일 Safari 용 "홈 화면"아이콘 이름 설정

---

기본적으로 웹 사이트를 아이콘으로 "책갈피 표시"할 때 ( Safari의 "+" 메뉴 에서 홈 화면 에 추가를 선택하여 ) 아이콘 이름은 기본적으로 페이지의 이며 12 자로 잘립니다.<title>

apple-touch-icon페이지의 고유 한 아이콘 표현을 지정할 수 있는 것과 거의 동일한 방식으로 웹 페이지에서 <title>? 이외의 기본 아이콘 이름을 지정하는 방법이 있습니까?

---

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

---

iOS의 경우 :

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

Android의 경우 :

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

---

모든 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 클라이언트의 제목을 변경합니다.

---

메타 태그 또는 이와 유사한 것으로이를 수행하는 방법이없는 것 같습니다. 내 제안은 서버 측 로직을 사용하여 iPhone에 다른 제목을 부여하는 것입니다. 예를 들어, PHP에서 다음과 같이 할 수 있습니다.

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

---

이것이 제가 가상의 클라이언트 인 "Super Epic Resort Hotels"를 위해 작업 한 방법입니다. "SERH"라는 약칭은 iOS 홈 화면 아이콘 이름 제한에 맞을 수 있습니다. (그런데 제한은 문자 수 (내 iPad의 경우 13)와 렌더링 된 너비 모두에 기반한 것 같습니다.)

한계에 도달 할 때까지 이름을 문자로 채 웁니다. 제 경우에는 9로 충분 해 보이지만 혹시라도 더 추가 할 수 있습니다.

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

페이지를 홈 화면에 추가 할 때 Safari는 이름을 제안합니다.

SERH

그것은 적극적으로

SERH ??????????????????????????

그러나 사용자가 이름을 백 스페이스 할 때까지 문자가 iOS에서 보이지 않고 공간을 차지하지 않기 때문에 사용자는이를 알아 차리지 못할 것 입니다. 제 경우에는 사용자가 "SERH"를 백 스페이스하기 전에 9 번 백 스페이스해야합니다.

편집 : 사용 위의 qmega의 솔루션과 함께이 는 AS, 비 iOS 기기에서 볼 때 문자를 볼 수 있습니다.

---

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에 연결하는 것이 가장 좋습니다.

---

아이콘 및 이름 설정은 아래 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

---

나는 사파리가 당신이 어떤 페이지를 당신의 홈페이지로 만드는 것을 허용하지 않을 것이라고 생각합니다.

참조 URL : https://stackoverflow.com/questions/3400741/setting-home-screen-icon-name-for-mobile-safari