New mobile viewport units supported natively

Creating websites that work on all devices requires that you stick to standards. Not only standard CSS with mediaquery breakpoints, such as flipsite does, but also that you follow the same methodology all throughout and resist the urge to grab a ready made javascript that does something and breaks all hell loose.

But building for mobile device height has been a bit of a pickle, due to mobile browsers height varying during scrolling thanks to e.g. the address bar disappearing and appearing or the keyboard popping up and taking a significant amount of the screen. A convenience feature and a must from the users perspective – but an extra thing to keep in mind for us website developers that strive for perfection.

Weve now included these new viewport units svh, lvh, dvh, svw, lvw, and dvw in all places you can use height, size etc.

Although all sections in flipsite are built for the 6 standard viewport sizes we support and its easy to add variations to your design (such as below), having support for only percentage and pixels wasnt enough.

Think of a mobile devices viewport with and without scrollbars & addressbars & keyboards and its easy to understand what these new supported viewport units mean:

• vh – the height of the viewport
• vw – the width of the viewport
• vmin – the smallest dimension of the viewport
• vmax – the largest dimension of the viewport
• svh – the smallest possible viewport height that the user sees
• lvh – the largest possible viewport height that the user sees
• dvh – the current viewport height.
• svw – the smallest possible viewport width that the user sees
• lvw – the largest possible viewport width that the user sees
• dvw – the current viewport size the user sees
• svmin – the smaller value between svh and svw
• lvmin – the smaller value between lvh and lvw
• dvmin – the smaller value between dvh and dvw
• svmax – the larger value between svh and svw
• lvmax – the larger value between lvh and lvw
• dvmax – the larger value between dvh and dvw
• vi – the viewport size in the inline direction. In left to right (LTR) language such as English it refers to width, but in e.g. Chinese writing from top to bottom, it refers to height.
• svi – the viewports smallest possible size in the inline direction
• lvi – the viewports largest possible size in the inline direction
• dvi – the viewports current possible size in the inline direction
• vb – the viewports size in the block direction, which in English means the height and for Chinese written top to bottom, means the width.
• svb – the viewports smallest possible dimension in the block direction
• lvb – the viewports largest possible dimension in the block direction
• dvb – the viewports current dimension in the block direction

At the end of the day these affect the CSS created by flipsite. You dont have to worry about the CSS itself – as with everything else in flipsite, you create the site and flipsites compiler makes sure consistently lightweight and correct HTLM & CSS is created so that its accessible and fast for all devices and humans.