Can vw (viewport width) be used for font size in HTML email for mobile

Question

I am creating an HTML email template. The desktop version is performed using tables, several built-in css, all sizes are determined in% or px values.

For the mobile version, I work with divs and css. Now I would like to resize some texts depending on the width of the viewport. Because if I define some header font size to say 28px, then certain text may look OK on a wider device, but on a smaller device, the text gets large and breaks onto the next line.

Now I consider setting the base font size as follows: (run the fragment in full screen mode, and then resize the 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> 

Similarly, subsequent font sizes are scaled depending on the width of the viewport, the title becomes smaller on smaller devices, preventing text breakage or making it less likely. Using calc (), I also define a certain minimum, so the text will not get too small.

Now my question is: is it ok to use this for email (mobile), or is it poorly supported by mobile email clients? Browser support is not bad, but I could not find information on mobile email client support.

Answer 1

Hi, you can always check css attribute support at http://caniuse.com . I found this: http://caniuse.com/#search=vw , which shows support for iOS 8.4 and Android 4.4 and higher. Not so great, and I think many people are still on iOS7 (well, maybe only me!).

In short, I agree that you probably shouldn't depend on this technology working everywhere.

Answer 2

Px is truly the only declared single ad for font size in HTML email design for clients and devices. ( https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/ ).

In mobile design, larger text is usually better, but there are times when headers or other elements need to be compressed to fit the design. Your best option here is to create an email with a “mobile first” design, and then use media queries and MSO terms to expand it for desktop computers.

With the opening of more than 50% of email on a mobile device ( http://www.emailmonday.com/mobile-email-usage-statistics ) and Gmail and many other third-party email applications completely removing the style tag, it makes sense to have a default mobile phone .

There are options to help the Gmail web client behave better ( http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/ ). Although the class and ID do not work using the style in the lang attribute (or recently verified attributes or attributes related to arias), you can to some extent control the layout of the version of Gmail email.