Desde el lanzamiento de los dos increíbles sistemas operativos móviles, iPhone y Android, en el mundo de Internet ha aparecido un nuevo término: WebApp (que significa una aplicación basada en WEB, que se ejecuta en dispositivos móviles de gama alta).

Los desarrolladores saben que en los sistemas de smartphones de gama alta hay dos tipos de aplicaciones: una es la APP que se ejecuta localmente (sistema operativo); otra es la WebApp que se ejecuta en el navegador de dispositivos de gama alta. Este artículo se centrará en esta última.

I. Relacionado con META/LINK:

1. Prohibir la transcodificación de Baidu

Al abrir una página web a través del móvil de Baidu, es posible que Baidu transcodifique tu página y pegue sus anuncios en ella, lo cual es realmente molesto. Sin embargo, podemos evitarlo mediante esta etiqueta meta:

<meta http-equiv="Cache-Control" content="no-siteapp" />

Enlaces relacionados:Declaración de transcodificación de SiteApp

2. Título después de agregar a la pantalla principal (iOS)

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

3. Habilitar el modo de pantalla completa de WebApp (iOS)

Cuando el sitio web se agrega a la pantalla principal y se inicia tocándolo, se puede ocultar la barra de direcciones (este efecto no ocurre al acceder desde el navegador o al introducir un enlace).

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

PD: Sin embargo, tras probarlo yo mismo con un 5S, establecer 'apple-touch-fullscreen' no sirve de nada. Espero que quien lo sepa pueda informar en los comentarios al final.

4. Configurar el color de fondo de la barra de estado (iOS)

Configurar el color de fondo de la barra de estado solo tiene efecto cuando 'apple-mobile-web-app-capable' content='yes'.

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

Parámetros de content:

  • default: el fondo de la barra de estado es blanco.
  • black: el fondo de la barra de estado es negro.
  • black-translucent: el fondo de la barra de estado es semitransparente. Si se establece a default o black, el contenido de la página comienza desde la parte inferior de la barra de estado. Si se establece a black-translucent, el contenido de la página llena toda la pantalla y la parte superior queda cubierta por la barra de estado.

6. Reconocimiento de números de teléfono móvil (iOS)

En iOS Safari (otros navegadores y Android no lo hacen), los números que parecen números de teléfono se convierten en enlaces de llamada, por ejemplo:

  • Números de 7 dígitos, como: 1234567
  • Números con paréntesis y signo más, como: (+86)123456789
  • Números con guiones, como: 00-00-00111
  • Números de 11 dígitos, como: 13800138000

Puede haber otros tipos de números que también se reconocen. Podemos desactivar el reconocimiento automático de números de teléfono mediante el siguiente meta:

<meta name="format-detection" content="telephone=no" />

Pero a veces, después de desactivar el reconocimiento automático de teléfonos, aún deseas que algunos números de teléfono, al mantener pulsado, enlacen a la función de marcación y SMS del iPhone. Puedes lograrlo con el siguiente método:

(2) Habilitar la función de llamada:

 <a href=”tel:123456″>123456</a> 

(3) Habilitar la función de SMS:

 <a href=”sms:123456″>123456</a> 

7. Reconocimiento de correos electrónicos en móviles (Android)

Igual que con el reconocimiento de números de teléfono, en Android se reconocen las cadenas con formato de correo electrónico. Podemos desactivar el reconocimiento automático de correos mediante el siguiente meta:

 <meta content=”email=no” name=”format-detection” /> 

Del mismo modo, también podemos mediante atributos de etiqueta activar la función de mantener pulsada una dirección de correo para que aparezca la opción de enviar un correo:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>

8. Agregar la barra de anuncios inteligente de la App, Smart App Banner (iOS 6+ Safari)

 <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”> 

9. Animación de inicio de Web App en iOS

Dado que la pantalla de inicio del iPad no incluye el área de la barra de estado, la imagen de inicio debe restar, en la orientación correspondiente, el área de la barra de estado20pxel tamaño; de manera correspondiente, en dispositivos retina hay que restar40pxel tamaño

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png.html" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png.html" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png.html" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png.html" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png.html" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png.html" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
（landscape：横屏 | portrait：竖屏）

10. Icono de la APP después de agregar a la pantalla principal

Especificar la ruta del icono de la web app después de agregarla a la pantalla principal. Hay dos formas ligeramente diferentes:

<!-- 设计原图 -->
<link href="short_cut_114x114.png.html" rel="apple-touch-icon-precomposed">
<!-- 添加高光效果 -->
<link href="short_cut_114x114.png.html" rel="apple-touch-icon">
  • apple-touch-icon: en iOS 6 y versiones anteriores, se añade automáticamente un efecto de brillo al icono (desde iOS 7 se usa el estilo de diseño plano).
  • apple-touch-icon-precomposed：Usar el 'icono de imagen original de diseño'

Efecto:

Tamaño del icono:

Se puede proporcionar diferentes iconos para diferentes dispositivos especificando el atributo size (pero por lo general, solo necesitamos proporcionar un icono de 114 x 114 píxeles).

La explicación oficial es la siguiente:

Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

  • 57 x 57 pixels
  • 114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

  • 72 x 72 pixels
  • 144 x 144 (high resolution)

11. Usar preferentemente las últimas versiones de IE y Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

II. HTML/CSS

1. Desactivar la mayúscula automática inicial del teclado de iOS

En iOS, por defecto el teclado tiene activada la función de mayúscula inicial. Si quieres habilitar esta función, puedes hacerlo así:

<input type="text" autocapitalize="off" />

2. Desactivar la corrección automática de entrada de iOS

De manera similar a la mayúscula inicial automática en la entrada de inglés, iOS también tiene una función: el método de entrada por defecto activa la corrección automática del contenido, lo que obliga al usuario a operar dos veces con frecuencia. Si no se desea activar esta función, podemos desactivarla mediante el atributo de la etiqueta input:

<input type="text" autocorrect="off" />

3. Prohibir la escala de texto

Cuando el dispositivo móvil cambia entre horizontal y vertical, el tamaño del texto se recalcula y se escala en consecuencia. Cuando no necesitamos este comportamiento, podemos optar por prohibirlo:

html {
　　-webkit-text-size-adjust: 100%;
}

Cabe señalar que este atributo ya se ha eliminado en PC; para que surta efecto en dispositivos móviles, se debe configurar `meta viewport`.

4. Cómo eliminar la sombra interior del campo de entrada en móviles

En iOS, los campos de entrada tienen una sombra interna por defecto, pero no se puede eliminar con box-shadow. Si no se necesita la sombra, se puede desactivar así:

input,
textarea {
　　border: 0; /* 方法1 */
　　-webkit-appearance: none; /* 方法2 */
}

5. Desplazamiento rápido con rebote

Primero veamos la historia del desarrollo del desplazamiento con rebote en los navegadores móviles:

  • En los primeros tiempos, los navegadores móviles no soportaban la barra de desplazamiento en elementos distintos de body, por lo que generalmente se usaba iScroll;
  • Android 3.0/iOS resolvieron el problema de desplazamiento en elementos distintos de body, pero la barra de desplazamiento no era visible; además, en iOS solo se podía desplazar con dos dedos;
  • Android 4.0 resolvió la invisibilidad de la barra de desplazamiento y añadió el efecto de desplazamiento rápido con rebote, aunque más tarde esta característica se eliminó;
  • iOS desde 5.0 resolvió la invisibilidad de la barra de desplazamiento y añadió el efecto de desplazamiento rápido con rebote.

En iOS, si quieres que un elemento tenga un efecto de desplazamiento nativo, puedes hacerlo así:

.xxx {
    overflow: auto; /* auto | scroll */
    -webkit-overflow-scrolling: touch;
}

PD: Después de usar iScroll, siento que no es muy bueno y tiene algunos bugs extraños. Aquí recomiendo otro, iDangero Swiper, que integra potentes funciones de desplazamiento por deslizamiento (compatible con 3D) y además tiene una barra de desplazamiento integrada con rebote. Dirección oficial:

http://www.idangero.us/sliders/swiper/index.php

6. Prohibir la selección de contenido en móviles

Si no quieres que los usuarios puedan seleccionar contenido en la página, puedes desactivarlo en CSS:

.user-select-none {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all （移动端不需要） */
  -ms-user-select: none;      /* IE 10+ */      
}

7. Cancelar el efecto de resaltado táctil en móviles

Al crear páginas móviles, se observa que todas las etiquetas a al hacer clic, o todos los elementos con la pseudoclase :active, muestran por defecto un marco resaltado en estado activo. Si no se desea ese resaltado, se puede prohibir globalmente mediante el siguiente método en CSS:

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Pero este método no funciona en dispositivos Samsung. Un método de compromiso es reemplazar las etiquetas a que no son enlaces de salto reales por otras etiquetas, lo que puede resolver el problema.

8. Cómo prohibir guardar o copiar imágenes (iOS)

Normalmente, cuando mantienes pulsada una imagen img en un teléfono o iPad, aparecen opciones como 'Guardar imagen' o 'Copiar imagen'. Si no quieres que los usuarios puedan hacer esto, puedes prohibirlo mediante el siguiente método:

 img { -webkit-touch-callout: none; }

Fuente: http://www.cnblogs.com/WhiteCusp/p/4502961.html