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

StackOverflow https://stackoverflow.com/questions/387318

Pregunta

Después de mira a escondidas en el SO fuente , he notado esta etiqueta: 

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

Lo que después de una búsqueda rápida en Google reveló un Apple 'favicon' cosa de tipo de pantalla de la página principal (" WebClip marcador" para ser exactos).

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

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

alt text
(fuente: alexking.org )

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

Estoy preguntando por lo tanto, ¿qué otros de Apple / Safari (iPhone / iPod Touch) etiquetas y atributos HTML específicas son por ahí que no estoy al tanto de! mentes curiosas necesitan saber!

¿Fue útil?

Solución 

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

Le permite configurar los valores de altura, la anchura y la escala 

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

Establecer el estado de estilo de barra, bastante explica por sí mismo. 

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

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

Hay otros varios atributos que son compatibles y están documentadas aquí: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Otros consejos

que me gustaría añadir mi propia respuesta con algunas cosas nuevas que he visto hasta la cosecha.

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

<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 el recubrimiento brillante predeterminada que lugares iPhone / iPod / iPad sobre los iconos de aplicación es demasiado, puede solicitar al no haber añadido que mediante la adición de "precompuesto" para el atributo rel. 

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

3). Puede hacer enlaces iPhone para el teléfono / mensajes de texto SMS directamente realizar la acción deseada 

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

4.) No es una etiqueta HTML, sino una opción útil para alternar CSS basada en 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 soporta 4x más píxeles que 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 en 24 maneras para esta añada información.

una etiqueta de cabecera útil para webapps de un solo uso es manzana -móvil-web-app-capaz . Cuando el usuario crea un acceso directo pantalla de inicio para el sitio, se pondrá en marcha en el modo 'pantalla completa', separar de la aplicación normal Mobile Safari y sin la barra de URL u otra cromo. Si el sitio está muy bien diseñado se puede sentir casi como una aplicación nativa para el iPhone.

@scunliffe Tomé su orientación cambiar 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;
  }
}

Resulta que hay un montón de ellos!

encontré este interesante:

  

Para especificar un icono para todo el sitio web (cada página en el sitio web), colocar un archivo de icono en formato PNG en la carpeta de documentos raíz llamada manzana-touch-icon.png o de manzana-touch-icon-precomposed.png. Si utiliza manzana-touch-icon-precomposed.png como nombre de archivo, Safari en el iPhone no añadirá ningún efecto al icono.

     

precompuesto está disponible para iPhone OS   2,0 y más tarde

El enlace DaringFireball Marc comparte enlaces a la guía de contenido web Safari. Como se ha mencionado por Andy, usted tiene que inscribirse en él, pero es gratis y fácil (bueno, no tan fácil como OpenID, pero cerca).

web Safari contenido Guía

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top