Is it OK to use vw (viewport width) for font-size in HTML email for mobile devices

Question

I am creating an HTML email template. The desktop version is done with tables, few inline css, all sizes are defined in % or px values.

For the mobile version I work with divs and css. Now I'd like to resize some texts depending on the viewport width. Because if I define some header's font-size to be say 28px, then a certain text might look OK on a wider device, but on a smaller device the text becomes to large and breaks to the next line.

Now I am considering setting the base font-size like this: (run snippet in full page mode and then resize window to see the effect)

:root {
  font-size: calc(8px + 4vw);
}

<h1>
  Header 1
</h1>
<h2>
  Header 2
</h2>
<p>
  Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum.
</p>

Like this the subsequent font-sizes are scaled depending on the viewport width, the header becomes smaller on smaller devices, preventing the text to break, or a least making it less likely. By using calc() I also define a certain minimum, so text won't become too small.

Now my question is if it's OK to use this for e-mail (mobile), or is it badly supported by mobile email clients? Browser support is quite good, but I couldn't find any information on mobile e-mail client's support.

Answer 1

Hi you can always check support for css attributes over on http://caniuse.com. I found this: http://caniuse.com/#search=vw which shows iOS 8.4 and Android 4.4 and above support. Not that great, and I imagine lots of people are still on iOS7 (ok, maybe just me!).

In short I agree you probably shouldn't depend on this techinque working everywhere.