Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

Viewport Metatag Rendered Unusable

Posted March 27, 2013 by Geoff Phillips

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

The Illusion of Control

In our responsive design testing, we've been trying a number of different techniques to control how our emails are displayed. One tempting piece of internet technology was this little line of code:

<meta  name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0," /> 

The example above does a few different things, in theory. Using width=device-width tells the browser or email client to assume that the page is as wide as the device. By adding initial-scale=1.0 you specify that the browser shouldn't zoom in or out on your content when it first displays it. Last, maximum-scale=1.0 should prevent users from zooming in or out. Sounds pretty useful, right? Sadly, browser support for this metatag is spotty, and email client support is even worse.

viewport_support="unreliable"

We tested the above properties of this metatag in a few different mobile clients to see how well they abided by its rules. We found a surprising amount of disparity between the clients, and one client that displayed nothing. That's right, the Blackberry will display a blank white page if you include the viewport metatag.

Viewport Testing

Device Allows zoom by default Initial-Scale Maximum-scale Notes
Android yes yes no Initial-scale seems to block the user from zooming out. Without the initial-scale, users can zoom out to aprox .5X. With and without the meta tag, it scaled up to the same max dimension (aprox. 2X). Seems like maximum-scale isn't supported.
iPhone yes no no This device operated the same regardless of viewport settings. Its max zoom is much higher than the Android (aprox 5X)
Kindle Fire yes yes yes Setting the initial-scale and max scale to 1.0 basically disables the zooming functions for this device. Setting the max scale controls the max zoom in and the max zoom out.
Xoom yes no yes Setting the max scale to 1.0 basically disables the zooming functions for this device. Setting the max scale controls the max zoom in and the max zoom out. This device did not respond to media queries with the meta tag
iPad yes no no This device operated the same regardless of viewport settings. It's max zoom is much higher than the Android (aprox 5X)
Blackberry -- -- -- Emails that are sent with <meta name="viewport" content="..." /> and anything in the content attribute appear to be blank when viewed on BlackBerry.

Blackberry, this is why we can't have nice things

Does this mean that the viewport tag is useless? As far as we can tell, yes. We tried testing a number of different things with the Blackberry to see if it would accept the viewport tag, and all tests failed. We tried using the deprecated "HandHeldFriendly" tag:

<meta name="HandheldFriendly" content="True" /> 

We hoped the Blackberry would accept the viewport tag after HandHeldFriendly, but that didn't help. We tried using fixed dimensions for the viewport tag, with no success. Because of this, as well as problems in other clients, it is our recomendation that those who want their email to be readable on a Blackberry (pretty much everybody) should not use the viewport tag at all.


If you've found a way to get past this limitation, please let us know!

Comments

Havas pic
Havas
Just FYI, in removing the meta tag causes iPhone 5 (iOS 6.1) to display the desktop version.
Posted 04/02/2013

Avatar
Geoff Phillips
Dan,
I tested an email in all of the iOS's we support and wasn't able to recreate what you described. First I tested using media queries, and they triggered successfully every time (without the metatag). In testing without media queries, the email looked the same with or without the metatag. Can you give me an example (or a "Share results" link) that shows what you described above?
Posted 04/02/2013

cblemuel pic
cblemuel
blackberry changes the font size do you have a solution? it might be a blackberry equivalent for webkit?
Posted 04/08/2013

mdbriefcase pic
mdbriefcase
Are you testing this on actual blackberries or with EOA? I'm not having this issue on EOA tests with <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Posted 04/12/2013

Avatar
Geoff Phillips
mdbriefcase,
We tested it using blackberries on the EOA system. I just confirmed that it renders as blank again using the tag in the post above, as well as the one you posted here. In our testing platform you should see this behavior on the BlackBerry 9930.
Posted 04/15/2013

cblemuel pic
cblemuel
Hi geoff, on my test with bb - it displays the default view (desktop formatting), but the text font size changes. i had tried the webkit text adjust none but does not work. You have some workaround?
Posted 04/15/2013

Avatar
Geoff Phillips
@mdbriefcase,
After a bit more testing all I can say for certain is that it is more complicated than it first appeared. I found that (with the viewport tag) very small amounts of text are rendered fine, but with more text than fits on the screen it shows a blank white page. Your email test, however, looked much longer than a single page and still rendered. I'd love to take a look if you'll send me your source code, to geoff [at] emailonacid.com.

I think it's safe to say that users should test their email first if they plan to include the viewport metatag.

@cblemuel,
We are looking into that issue and hope to have a workaround or fix soon.
Posted 04/15/2013

Arjay Maneja pic
Arjay Maneja
How about this viewport;

<meta name="viewport" content="width=320; initial-scale=1.0; user-scalable=no;">

And check this link: http://developer.blackberry.com/html5/documentation/viewport.html

Let me know your review. wink
Posted 04/18/2013

Avatar
Geoff Phillips
@Arjay,
I tried it with our responsive template, but it still renders blank: http://www.emailonacid.com/app/acidtest/viewresult/w5yzk43vHD6TQbxc1fObxLVoXmOXHx8Yr3a7HrTo0kdNA

I am reading the content you linked now. Thank you for sharing this!
Posted 04/18/2013

Avatar
charles.hall
@Arjay, @Geoff,

the document referenced is for BlackBerry Browser, not the BlackBerry Email Client

all of my EOA tests have failed in BB, but i have no actual device to test on
Posted 05/24/2013

Ethan Clarke pic
Ethan Clarke
A few months ago I was working with an email template that uses this tag for a project where the client gave BBs to all staff. This issue only affected SOME of the BBs. People with the same model but bought in different years had different results.

Thank god I found a small description of this problem that identified this cammand as the culprit. Took days of stress to get there though.

Thanks for documenting this issue. Damit, BB! You were so good and now you fail so badly.
Posted 06/12/2013

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!