Amongst the newer responsive CSS selectors, my favorites are definitely vw (Viewport Width) and vh (Viewport Height). A lot of web designs that have come my way call for full page layouts with no containing max-width and no overflow of content that requires scrolling to view. These designs also feature vertical boxes that should collectively be visible within the viewport at the same time regardless of the browser’s height when scaled responsively. When researching to find a CSS solution to this, I stumbled upon the vh/vw units.
Layout Effect on Desktop
Same Layout Effect on Mobile Device
I was developing primarily using Chrome and found that all of my declarations were looking and functioning beautifully. The layout also maintained its proper relative dimensions when the viewport was scaled responsively. I noticed similar positive results on Safari and Firefox as well and I was elated that I might have found a simple solution. And then I did mobile testing…
The Inevitable Browser Problems
The expected lack of browser support applied primarily to mobile browsers in this case. I noticed it failing to work on my IOS simulator, as well as my iPod/iPhone with software updated to 7.0.1. It worked no better on my Android smartphone. The unit of measure was simply not recognized, rendering my perfectly calculated layout an indiscriminate cluster of ugliness and left me crestfallen as I went back to the drawing board. At the time that this post is being written, the browser support includes, according to caniuse.com, Chrome, Safari, Opera, Firefox, and only the 2 most recent software versions of Android. The units partially work on IOS Safari, Blackberry Browser, and IE. They do not work at all on Opera Mini or older versions of Safari and Android. Also according to this site’s information (just to put things into perspective), the partially supported browsers only account for 20.28% of the total 75.92% of full support for these CSS measurement units so I wouldn’t put much stock into them. This all was enough to give me a headache and to force me to find an alternative solution.
The obvious fallback for vw is simple percentages. IE: using “width: 100%” instead of “width: 100vw”. As much as I would have loved to have given my div a height of 100% and have called it a day, the solution for the height issue was a little more involved as the viewport needs to know how tall it is in the first place before it can divide and conquer the percentage heights if its contents.
Layout using vw/vh
$(‘div’).height($(window).height() / 4);
What to make of this
At this point it’s clear that until more people are using devices with updated software, there are 3 ways to implement this CSS technique:
- Use vw/vh and set fixed dimensions for the divs at mobile breakpoints to keep code simple.