iphone - sugerencia - Configuración del nombre del icono "Pantalla de inicio" para Safari móvil

mostrar sugerencia añadir a pantalla de inicio

Question

De forma predeterminada, al "marcar como favoritos" un sitio web como un icono (al elegir Agregar a la pantalla de inicio desde el menú "+" de Safari), el nombre del icono se establece de manera predeterminada en el <title> la página, truncado a 12 caracteres.

De la misma manera que apple-touch-icon permite especificar su propia representación iconificada de la página, ¿hay alguna manera para que la página web especifique un nombre de icono predeterminado que no sea su <title> ?

Answer 1

Así es como trabajé para mi cliente ficticio, "Super Epic Resort Hotels", cuyo nombre abreviado "SERH" puede ajustarse al límite de nombre de icono de la pantalla de inicio de iOS. (Por cierto, el límite parece estar basado tanto en el recuento de caracteres (13 en mi iPad) como en el ancho procesado).

 el nombre con  personajes hasta que llegue al límite. En mi caso, 9 parece ser suficiente, pero siempre puedes agregar más por si acaso.

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

Al agregar la página a la pantalla de inicio, Safari sugiere el nombre:

SERH

que es actaully

SERH

pero el usuario no los notará, ya que el  los personajes son invisibles en iOS y no ocupan espacio, hasta que el usuario intente retroceder el nombre. En mi caso, el usuario tiene que retroceder 9 veces antes de que pueda retroceder "SERH".

Editar: Úselo junto con la solución de qmega anterior , como  los caracteres pueden ser visibles cuando se ven en dispositivos que no son iOS.

Answer 2

Creo que safari no te permitirá convertir tu página de inicio en una página; al final, no tiene sentido convertir tu página de inicio en un motor de búsqueda.

Answer 3

En iOS 6 esto se resuelve con una metaetiqueta:

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

Como cwap comentó correctamente: ahora es la documentación oficial. Aquí encontrarás toda la información sobre la configuración de meta para aplicaciones web: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Answer 4

No parece haber ninguna forma de hacer esto con meta tags o algo así. Mi sugerencia sería usar la lógica del lado del servidor para darle a los iPhones un título diferente. Por ejemplo, en php puedes hacer algo como esto:

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

Answer 5

Para iOS 6, usa la solución de Maarteen. Para compatibilidad con iOS 5, también puede cambiar el título usando JS:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)
    || navigator.userAgent.match(/iPad/i)) 
{
    document.title = "Short Title";
}

Probablemente sea mejor adjuntar esto a la carga del cuerpo usando JQuery.

Answer 6

Para iOS:

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

Para Android:

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

Answer 7

Para una mejor compatibilidad cruzada en todas las versiones de iOS, puede usar una combinación de respuestas (inspirada en https://.com/a/13838563/1048705 ):

Coloque esto en su documento para iOS 6+:

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

y use el contenido de esta etiqueta para el título de otras versiones de iOS que no admitan la etiqueta directamente:

if (navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
    document.title = document.getElementsByName(''apple-mobile-web-app-title'')[0].content;
}

Tenga en cuenta que el JavaScript cambiará el título para todos los clientes iOS, incluido iOS 6+.

Answer 8

Puede consultar la siguiente URL para configurar el icono y el nombre: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

En cabecera, agregue el siguiente código:

<link rel="apple-touch-icon" href="/custom_icon.png"> // For icon
<meta name="apple-mobile-web-app-title" content="Short name"> // For name