¿Forma estándar para detectar el cliente de correo móvil?

Question

Esta pregunta es similar a "Standard way to detect mobile browsers in a web application based on the http request" excepto para clientes de correo. Por ejemplo, si se abre un mensaje de correo electrónico en el cliente de correo de iPhone incorporado, se mostrará una versión del mensaje especialmente formateada para el iPhone. Si se abre en una tableta o computadora de escritorio, se mostrará como la versión completa y de tamaño completo del correo electrónico. En principio, esto es similar a los sitios web que tienen versiones optimizadas para dispositivos móviles del sitio que se cargan automáticamente al detectar el agente de usuario, pero para clientes de correo electrónico.

Entonces, ¿es posible detectar el cliente de correo utilizado para abrir un correo electrónico y formatear el mensaje en consecuencia? Tal vez una forma de detectar la resolución de la pantalla?

Answer 1

Puede intentar aplicar @media css consultas que apuntan a navegadores específicos como dispositivos móviles. Hay una buena introducción en el campaignmonitor help website, pero tenga en cuenta que probablemente solo esté respaldado por una mano llena de navegadores y dispositivos, con iOS activado afortunadamente :)

Básicamente está definiendo estilos CSS que apuntan a anchos de pantalla específicos para que puede optimizar su correo electrónico para un espacio de pantalla limitado.

@media only screen and (max-device-width: 480px) { ... } 

Cuando se habla realmente de detección y mostrando un correo electrónico totalmente diferente, eso es realmente imposible, ya que estamos hablando de JavaScript allí y eso no se hace en los correos electrónicos y probablemente ni siquiera va a funcionar en el 99% de todos los clientes de correo electrónico. Pero puede hacer muchísimas cosas con las consultas de @media.

Answer 2

Creo que la mejor solución es utilizar técnicas de diseño web receptivas. Así que mi sugerencia sería un diseño fluido de correo electrónico que se ajustaría en función del tamaño de la pantalla del teléfono móvil.

Aquí se muestra un ejemplo: http://stylecampaign.com/blog/?p=85

Nota: La escritura de marcado para el correo electrónico es una bestia completamente diferente que el navegador. Aquí hay algunas guías vale la pena mirar:

http://articles.sitepoint.com/article/code-html-email-newsletters/

http://www.mailchimp.com/resources/guides/email-marketing-field-guide/

Answer 3

Si quieren CSS que se dirige específicamente a los navegadores móviles que puede probar el siguiente código.

<link rel="stylesheet" type="text/css" href="desktop.css" media="screen" /> 
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" /> 

Las etiquetas HEAD a menudo son eliminadas por los clientes de correo electrónico, por lo que se prefieren los estilos en línea. Pero si enlaza con CSS dentro de las etiquetas BODY debería funcionar.

Answer 4

Cuando dices "cliente de correo", ¿te refieres al cliente de correo electrónico real que utiliza el acceso ActiveSync, IMAP o POP? Entonces necesitaría saber si hay información en cada protocolo que pueda simular el User-Agent de HTTP, que desafortunadamente no existe en IMAP o POP3 AFAIK. En Active-Sync, al ser HTTP, tiene User-Agent y puede modificar las respuestas a medida que, por ejemplo, primero el dispositivo solicita una versión de texto (por ejemplo, las líneas de vista previa en la vista de lista), y luego solicita el toda la versión de mimo (posiblemente html). En este punto, el servidor puede ajustar el mimo del correo electrónico y devolver una versión optimizada (por ejemplo, ajustar el marcado, convertir o cambiar el tamaño de archivos adjuntos, etc.)