Viewport Metatag Rendered Unusable
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!
Author: Kyle Lapaglia
Author: Kyle Lapaglia
11 thoughts on “Viewport Metatag Rendered Unusable”
Comments are closed.
Just FYI, in removing the meta tag causes iPhone 5 (iOS 6.1) to display the desktop version.
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?
blackberry changes the font size do you have a solution? it might be a blackberry equivalent for webkit?
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″/>
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.
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?
@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.
How about this viewport;
<meta name=”viewport” content=”width=320; initial-scale=1.0; user-scalable=no;”>
Let me know your review. 😉
@Arjay,
I tried it with our responsive template, but it still renders blank.
I am reading the content you linked now. Thank you for sharing this!
@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
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.