Viewport Units: A quick test
Lately, I've been an avid reader at Medium.com. The site offers amazing content ranging from war diaries to the latest in technology. Among the dozens of collections available, I follow On Coding, HTML5 & CSS3, Python and War is Boring. I spend an hour or so a day reading the latest articles from these collections.
Last Friday, I came across Introducing viewport units by David C (@davidcafor). It showcases a set of units that can be used when designing responsive webpages. The units, vh, vw, vmin and vmax, measures the size of elements on the page relative to the viewport the user is viewing the content on.
- 1vw is 1% of the viewport width
- 1vh is 1% of the viewport height
- 1vmin is 1% of the smaller viewport value between the width and height
- 1vmax is 1% of the bigger viewport value between the width and height
Having built two responsive templates (Named and Unnamed), I immediately understand the potential use of these units. So I created a simple practice page to find out how a webpage built using these units response on different devices. Here's how it looks like with the browser menu removed.
Desktop (1366 x 768)
As 1vw is 1% of the actual width of the viewport, it's not surprising to see the texts blow-up on the whole page when viewed from a typical desktop monitor. This can be fixed by using the vmin, which choose the lowest value between the vh and vw.
After applying vmin...
Mobile (384 x 598)
It looks great on the smartphone. However, I noticed a potential issue with using vmin or vmax on smartphones. As you scroll through the page, the address bar disappears thereby changing the values of the viewport's height and width. This makes the page resize halfway through browsing, which can be annoying. I'll look around the net for a fix.