Can I use Viewport Units?

In CSS there are a number of units by which we can dictate the size of an element. The most common on the web are pixels (px) and percentages (%). But CSS has evolved and a host of new units have been developed; one of which is Viewport Units.

For ease we’ll cover just Viewport Width (vw) and Viewport Height (vh).

The Viewport

To understand how viewport units work, first you must know what the viewport is. Simply, the viewport is dictated by the amount of website you see on a screen, device or browser at any one time. If the website is longer or wider and extends off the limits of the screen or browser then this is not counted as part of the viewport.

Viewport units work like percentages, but where percentage units are affected by the dimensions of a website or individual elements within it, these new units are defined solely by the viewport; so:

• 1vw = 1% of the viewport width
• 100vh = 100% of the viewport height

These units will be a big help as responsive websites become more complex.

Starting Out

In building the new Ripon Rugby micro-site we determined that viewport units would be the ideal solution to ensuring that the content always appears for users with small screens. In the design we wanted to create a big impact through the use of imagery and so the main content begins some 600+ pixels from the top of the website so that it doesn’t appear over the imagery.

But when using pixel units the content would appear below the fold on small screens and ideally we wanted to ensure they’d still see something. So by instead defining the space above the content as 75vh we could ensure the content would always appear on screen, no matter the screen size.

But we weren’t sure what level of support was available for viewport sizes. Turning to the rather brilliant Can I Use we saw that support was pretty high and that pixel units combined with media queries would offer a suitable fallback for those browsers yet to support these units.

The iOS problem

But through testing we began to see support for viewport units wasn’t quite what we needed it to be. Instead of the content appearing 75% from the top of the viewport on iOS Safari 7 the content would appear much further down the page.

It appeared in the case of both the iPhone and iPad (when used in conjunction with the viewport meta tag) that these browsers were calculating viewport height equal to the height of the website or alternatively calculating the viewport size prior to adjusting the viewport as dictated in the meta tag.

The Internet provided no clear solution and other websites using vh units seemed to display the same problem so could not be used as a comparison in determining a fix. Ultimately we had to revert to using pixel measurements instead.

No

This is our answer to the title of this blog post; Can I use Viewport Units?

Our reasoning is that with viewport units being largely used in responsive websites and with iOS devices accounting for a large percentage of mobile traffic it’s not possible to implement something that has issues in iOS without a good fallback.

iOS does support these units, but with problems, so traditional CSS fallbacks would not work and we tend to avoid browser sniffing or other hacks as much as possible. So our only option was to return to a solution we knew would work.

Hopefully the situation will change and a fix or alternative solution will be found but as 2013 comes to a close we’re just not confident that viewport units are suitable for commercial websites today.

If you’re reading this and think iOS support has changed or a solution has been found, we’d be grateful if you could let us know.