I started a new GitHub repo to fill with jQuery utilities and behaviors.
The initial commit is filled with viewport sizing utilities. The utilities make it easy to use viewport-relative sizing in situations where browsers do not support VW and VH.
Something that I use a lot is the Letterboxing module. Simply by adding .jq-letterbox, you can strictly enforce an element to have a widescreen aspect ratio. This is very handy for sites that show lots of YouTube movie trailers.
Grab the Repo
1. Import a recent version of jQuery
2. Import the utilities AFTER jQuery
Full usage information is available at the head of the jqUtilities.viewport.js file.
.js-vh: Viewport Height positioning
data-vh: a numeric value greater than 0 (zero). 1vw is 1% of the viewport's height.
<div class="js-vh" data-vh="50"
<!-- this will be half the height of the viewport -->
via jqu_log: reports new height in vh
via jqu_log: reports when requested vh is invalid
By default, these utilities log errors to the console.
- Mixed markup and style information. Style information is hard-coded into HTML markup. This might be undesirable.
- This is not a polyfill. It is a workaround. Nice polyfills exist, and that might be a better option for you.