2010-08-03 13 views
54

Por defecto, cuando "marcadores" de un sitio web como un icono (al optar por Añadir a pantalla de inicio desde dentro menú de Safari "+"), el nombre del icono por defecto al <title> de la página, truncado a 12 caracteres.Marco "pantalla inicial" nombre del icono de Safari móvil

De la misma manera que apple-touch-icon le 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 <title>?

+0

No lo creo. ¿Has consultado la guía de desarrollo de safari móvil? –

+0

Brian, no vi ninguna referencia en los How-Tos and Guides de Apple disponibles públicamente. – pilcrow

+0

Lo único que se me ocurre es tener algo de lógica del lado del servidor para enviar un título diferente si está sirviendo a un iPhone. – qmega

Respuesta

202

En iOS 6 Esto se soluciona con una etiqueta meta:

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

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

+3

Parece que esto solo funciona para iOS 6. No funciona en mi iPhone 4S con iOS 5.1.1. – davidjb

+5

@davidjb sí, eso es lo que dice la respuesta. Gracias por enfatizar –

+1

Puedo confirmar que esto todavía funciona en iOS 7.1. – aaronk6

3

No parece haber ninguna manera de hacer esto con etiquetas meta o algo por el estilo. 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 que podría hacer algo como esto:

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

Probablemente también deba tener en cuenta el iPod touch y el iPad. – BoltClock

+0

Buen punto. Se corrigió para que coincida con 'iP'. No creo que nada más envíe eso en la UA. – qmega

2

Ésta es la forma en que trabajé alrededor de él para mi cliente ficticio, "Super épicos Hoteles Resort", que abrevia el nombre "SERH" puede ajustarse a la pantalla de inicio de iOS icono de nombre límite (Por cierto, el límite parece basarse tanto en el recuento de caracteres (13 en mi iPad) como en el ancho procesado).

Rellene el nombre con &#xFFFF; caracteres 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 añadir la página a la pantalla de inicio, Safari sugiere el nombre:

SERH

que es convenientemente indicado

SERH & # xFFFF; & # xFFFF ; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF; & # xFFFF;

pero el usuario no los notará, ya que los caracteres &#xFFFF; 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: Utilice esto junto con la solución de qmega anterior, ya que los caracteres &#xFFFF; pueden estar visibles cuando se ven en dispositivos que no son iOS.

+0

Es un hack inteligente ... – SimplGy

1

Para iOS 6, use la solución de Maarteen. Para la 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 la mejor manera de conectar esta a onload cuerpo usando jQuery.

4

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

Coloque esto en su documento para iOS 6+:

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

y utilizar el contenido de esta etiqueta por el título para otras versiones de iOS que no soportan directamente la etiqueta:

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

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

12

Para iOS:

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

Para Android:

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

Funciona tanto en iOS como en Android, pero no funciona en el navegador Firefox – Guru

Cuestiones relacionadas