iphone - apple - icloud

¿Cuáles son todas las etiquetas especiales de iPhone/iPod Touch?

Question

Después de echar un vistazo a la fuente SO, noté esta etiqueta:

<link rel="apple-itouch-icon" href="/apple-touch-icon.png" />

Que después de un rápido Google reveló una cosa tipo de "favicon" de Apple para mostrar en su página de inicio ("marcador de WebClip" para ser exactos).

El único otro que salta a la mente es el:

<input type="search" results="5"/>

texto alternativo http://alexking.org/dev/safari-search-box.gif

Este tipo = "búsqueda" hace que el campo "herede" el icono de búsqueda de Apple, y los resultados opcionales = "x" permiten que se mantenga un historial de palabras clave "x".

Por lo tanto, me pregunto qué otras etiquetas y atributos HTML específicos de Apple / Safari (iPhone / iPod Touch) están disponibles y que no conozco. ¡Las mentes curiosas necesitan saber!

Answer 1

Una etiqueta de encabezado útil para webapps de un solo propósito es apple-mobile-web-app-capable . Cuando el usuario crea un acceso directo a la pantalla de inicio para el sitio, se iniciará en el modo de "pantalla completa", separado de la aplicación Mobile Safari normal y sin la barra de URL u otro chrome. Si el sitio está bien diseñado, se puede sentir casi como una aplicación nativa de iPhone.

Answer 2

¡Resulta que hay muchos de ellos!

Encontré este interesante:

Para especificar un icono para todo el sitio web (cada página del sitio web), coloque un archivo de icono en formato PNG en la carpeta del documento raíz llamada apple-touch-icon.png o apple-touch-icon-precomposed.png. Si usa apple-touch-icon-precomposed.png como nombre de archivo, Safari en iPhone no agregará ningún efecto al icono.

precompuesto está disponible para iPhone OS 2.0 y posterior

El enlace de DaringFireball Marc compartió enlaces a la guía de contenido web de Safari. Como lo mencionó Andy, debes registrarte, pero es gratis y fácil (bueno, no es tan fácil como OpenID, pero está cerca).

Guía de contenido web de Safari pdf

Answer 3

<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

Le permite establecer los valores de ancho, alto y escala

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Establezca el estilo de la barra de estado, bastante explicativo.

<meta name="apple-mobile-web-app-capable" content="yes" />

Como Marc mencionó anteriormente, y se explica en el enlace daringfireball.net, permite que la página web se ejecute en modo de pantalla completa, en lugar de a través de safari.

Hay otros varios atributos que son compatibles y están documentados aquí: https://developer.apple.com/webapps/docs/.../SafariHTMLRef/SafariHTMLRef.pdf
(necesita acceso a Apple Developer Connection para ver)

Answer 4

La documentación mencionada anteriormente se ha movido. Estas son las nuevas ubicaciones.

Referencia HTML de Safari: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf

Guía de contenido web de Safari: http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf

Answer 5

Pensé que agregaría mi propia respuesta con algunas cosas nuevas que he visto surgir.

1.) Hay una opción para proporcionar un icono de pantalla retina iPhone 4 de mayor definición

<link rel="apple-touch-icon" href="icons/regular_icon.png" />
<link rel="apple-touch-icon" href="icons/retina_icon.png" sizes="114x114"/>

2.) Si encuentra que la superposición brillante brillante que el iPhone / iPod / iPad coloca en los iconos de la aplicación es demasiado, puede solicitar que no se agregue agregando "precompuesto" al atributo rel.

<link rel="apple-touch-icon-precomposed" href="/images/touch-icon.png" />

3.) Puede hacer que los enlaces de iPhone para enviar mensajes de texto por teléfono / SMS directamente hagan la acción deseada

<a href="tel:[phone]">Call us</a>
<a href="sms:01234567890">Text us</a>

4.) No es exactamente una etiqueta HTML, pero es una opción práctica para alternar CSS en función de la orientación

<script type="text/javascript">
  function orient(){
    switch(window.orientation){
      case 0:
        document.getElementById("orient_css").href = "css/iphone_portrait.css";
        break;
      case -90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
      case 90: 
        document.getElementById("orient_css").href = "css/iphone_landscape.css";
        break;
    }
  }
  window.onload = orient();
</script>

5.) Puede proporcionar una hoja de estilo CSS especial para la pantalla retina del iPhone 4 que admite 4x tantos píxeles como el original.

<link rel="stylesheet" type="text/css" href="../iphone4.css"
   media="only screen and (-webkit-min-device-pixel-ratio: 2)" />

Gracias a @Sarah Parmenter más de 24 maneras para esta información adicional.

Answer 6

@scunliffe Llevé tu interruptor de orientación un paso más allá:

function orient(o){
  switch(o){
    case -90:
    case 90: 
      $(''#container'').removeClass().addClass(''landscape'');
    break;
    default:
      $(''#container'').removeClass().addClass(''portrait'');
    break;
  }
}