Correo electrónico html responsivo en la aplicación de correo nativo de Android android nexus 5 (4.4.2)

Tengo un diseño de prueba que utiliza tablas para mostrar dos columnas y consultas de medios que apila las dos columnas a una en los clientes de correo electrónico que admiten consultas de medios. Estoy pegando con tablas en lugar de divs, ya que tenemos que apoyar a Outlook, así 🙁 El diseño funciona muy bien en Android 4.3 y por debajo (las columnas apilan), pero sopla en Nexus 5 (Android 4.4.2) Las dos columnas Sigue apareciendo al lado de la otra con la segunda columna está completamente aplastado.Parece que 4.4.2 no es compatible con el bloque de visualización en td.Alguien ha experimentado esto? Si es así, ¿hay algún trabajo alrededor de este? Por cierto, Parece que sólo mostrar el bloque y la pantalla: en línea de bloque no son compatibles en Nexus 5, si establezco el tds para mostrar: ninguno en mi consulta de medios, que están ocultos en la pantalla.A continuación hay una plantilla básica de correo electrónico html que doesn ' T trabajo: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0;width:device-width"> <!-- So that mobile webkit will display zoomed in --> <title>Email template</title> <!-- disable auto telephone linking in iOS --> <meta name="format-detection" content="telephone=no"> <style type="text/css"> @media screen and (max-width:640px) { table[class="container"] { width: 100%!important; } td[class="cell"] { background-color: #cc3333; width: 100%!important; display: block!important; } } </style> </head> <body> <table width="640" align="center" cellpadding="0" cellspacing="0" class="container"> <tr> <td class="cell">Hello world</td> <td class="cell">Hello world</td> </tr> </table> </body> </html>

Editar 1/14 Utilizar tablas como elementos de bloque funciona. Dado que las tablas son flotadas (utilizando alinear) se envuelven en caso de que el ancho es inferior a 640px. Ahora el único problema es, cuando las dos tablas se ajustan, ya que su ancho se establece en 320px el texto no se refluye al 100% en dispositivos con resolución nativa de más de 320px pero menos de 640px (digamos iPhone en modo horizontal que es 480px ), Pero en su lugar se envuelve en 320px (dejando alrededor de 160px de espacio en blanco a la derecha). Sé que puedo cambiar la anchura usando la consulta de los medios pero desafortunadamente no trabaja en la aplicación de Gmail (grrh). ¿Algún pensamiento / sugerencia? Estructura simple de la mesa – 

 <table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0"> <tr> <td> <table align="left" style="width:49%;" border="1"> <tr> <td style="max-width: 100%">long text which should take about 480px </td> </tr> </table> <table style="width:49%;max-width: 100%" align="left"> <tr> <td style="width:100%;">long text which should take about 480px </td> </tr> </table> </td> </tr> </table>

Creo que será mejor utilizar sólo tabla para sus estilos css, porque la etiqueta td es más impredecible

Puede encontrar un buen ejemplo de diseño de dos columnas aquí:
http://www.campaignmonitor.com/guides/mobile/responsive/

Puedo ser un poco tarde para la fiesta, pero para aquellos que todavía se encuentran con este problema y necesitan una solución sólida, manteniendo su código limpio, aquí es uno:

Utilice su mejor práctica, en lugar de usar <td> para diseños de varias columnas, use <th> . Y poner un align="left" y font-weight: normal; Sobre ellos para sobrescribir sus estilos estándar.

<th> todavía se comportan con respuesta en 4.4, mientras que <td> no lo hacen.

Espero que esto ayude.

PS Y si también quieres una aplicación móvil para gmail, también puedes probar la variante móvil de primera respuesta: http://julie.io/writing/responsive-layout-email-ux-munich-newsletter/

Por favor, inténtalo en gmail android app hack y usa th en lugar de td. Utilizo este código de diseño para la plantilla de correo electrónico. Este código muestra dos columnas en todos los clientes de correo electrónico, excepto iphone. Este código muestra dos contenidos de bloque en iphone. 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0;width:device-width"> <!-- So that mobile webkit will display zoomed in --> <title>Email template</title> <!-- disable auto telephone linking in iOS --> <meta name="format-detection" content="telephone=no"> <style type="text/css"> .gmailfix {display:none;display:none!important;} @media only screen and (max-width: 640px) { *[class].ablock { display:block !important; text-align:center; background-color: #cc3333; width: 100%!important; display: block!important; } } @media screen and (max-width:480px) { .tblock{ display: block !important; text-align: center !important; max-width:600% !important; width:100% !important; } } </style> </head> <body> <div class="gmailfix" style="white-space:nowrap;line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div> <table align="center" style="width: 640px;max-width:100%" cellpadding="0" cellspacing="0"> <tr> <td> <table class="tblock" style="width:100%;"> <tr> <th class="ablock">long text which should take about 480px </th> <th class="ablock">long text which should take about 480px </th> </tr> </table> </td> </tr> </table> </body> </html>
  • Abrir aplicación de Chrome con URL
  • Android html.fromhtml + spannablestring
  • Establecer rowSpan o colSpan de un hijo de un GridLayout por programa?
  • Android WebView personalizado no logra encontrar funciones de javascript definidas en HTML cargado
  • Implementación de la paginación en formato de libro HTML
  • Formato del texto de TextView utilizando valores / strings.xml, HTML y CSS
  • ¿Cómo evitar que el navegador Google Chrome android muestre la lupa cuando los usuarios hacen clic en un botón?
  • Android ICS-como el campo de entrada en CSS
  • Cuando invoco una función Java desde mi código Javascript, WebView se bloquea. ¿Por qué?
  • Activa Google Maps desde el navegador de Android
  • Imágenes borrosas en el navegador Android de stock
    • Interesting Posts

    Acceso a la aplicación de Android

    Gcm mensaje a través de javascript

    ¿Cómo puedo almacenar imágenes usando sharedpreference en android?

    Copia de seguridad y restaurar widgets pantalla de inicio y fondo de pantalla en vivo

    ¿Cómo abrir el navegador predeterminado de Android sin especificar una URL?

    Causado por: java.lang.IllegalStateException: ParsePlugins ya está inicializado

    iniciar gira virtual con gmaps v2 para android

    Cómo habilitar la compatibilidad con mDNS en la barra de direcciones del navegador de Android

    Problema con el certificado: aparece la página SSL "necesita establecer un pin o una contraseña de bloqueo de pantalla para poder usar el almacenamiento de credenciales" en Android

    Android / javascript – problema con window.innerWidth y window orientationEvent disparando en el momento adecuado

    Fragmento de Android (con el paquete de compatibilidad en 2.3.3) crea "El niño especificado ya tiene un error de padre"

    Cómo reproducir la aplicación no responde (ANR) de actividad y de BroadcastReceiver

    RSA y AES Descifrar y cifrar el problema

    ExpandableListAdapter onClickListener, llame a notifyDataSetChanged ()

    Conectar android a dos redes inalámbricas simultáneamente
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.