For the most part, emails will render well on Android, but there are still several inconsistencies. From what I can tell, the apps fall into one of four camps:

  1. Apps that allow CSS and media queries, allowing for proper responsive design
  2. Apps that don't allow CSS, and shrink the email down to fit the screen, keeping all aspect ratios in the process
  3. Apps that don't allow CSS, and make you scroll horizontally to see emails wider than your device's reported DPI
  4. Apps that don't allow CSS, and throw all your widths out the window and resize your email into a mess

Those first three app types, but it's that fourth one that's a real pain in the neck, particularly because that's the behaviour of the AOSP email app. In other words, if a phone manufacturer doesn't develop their own unique email app, that's the one they'll be using. That means a large number of users are probably using an app based on the AOSP app, and that's an issue.

The solution? Well, I've seen several different ones that all work reasonably well. The most common one I've seen is to load a div or other container with a whole mess of alternating non-breaking spaces with reguar spaces, or sometimes hyphens, with a no-wrap style. This totally works, but it's always struck me as inelegant, which many fixes in email HTML are a necessary inelegance, but I think I may have found a better way. Here it is:

<style>hr {display:none; visibility:hidden;}</style>
<div style="mso-hide:all;"><hr style="width: 690px;border:0"></div>

That's it. Simple right? Let's break it down. The lowly horizontal rule is the key element here. A very basic line, nothing more. For the inline styles, we set the width to the desired width of our email, in this case 690px. This is the entirety of what fixes the issue caused by scenario 4 above, an <hr> set to a specific width. Of course, just adding an <hr> will cause other problems, specifically now we have a gross line on our email and our responsive coding won't behave properly. For that reason, we add a style to our <style> element to not display <hr> elements at all, eradicating the hr from any email client that uses embedded CSS. That won't work for Outlook though, so we wrap the <hr> in a <div> and add an inline style of mso-hide:all. That just leaves one problem, which is that those other 3 scenarios above are still showing a line. So we just add a border:0 style inline to the <hr> and we are all set!

As for placement, put the style wherever you like in your existing stylesheet, and I personally put the <div> within the cell of my containing table, all the way at the bottom, but it may work better for you elsewhere.

If anyone manages to find a scenario where this doesn't function, please let me know! I've done a fair amount of testing to come up with this solution, so I'm confident it should work in most scenarios, but I'm just one code-monkey and can absolutely have missed something. Or if you have a reason why the other methods for solving this problem are in fact superior, please feel free to discuss.