viewportscale

This module integrates the viewportScale jQuery plugin, so you can use new CSS viewport units (vw, vh, vmax and vmin) in your theme CSS and support browsers that do not fully interpret them correctly. This is particularly useful when you wish a page section to occupy a the same proportion of the screen at all resolutions. Please note the module requires jQuery update and at least jQuery 1.7. The plugin detects browser support for viewport units and only applies inline styles for browsers that require them.

Usage:

1. Enable the module and then enable the plugin sitewide. The JS file is bundled with the module, so no additional downloads are required.
2. Whenever you use vw, vh, vmin or vmas in your CSS, duplicate this in your custom Javascript code, within a Jquery context. Ideally this will be in site-wide Javascript file.

Syntax:

$('#my-target-css-path').viewportScale({
  height: '80vh'
});

$('#my-target-css-path').viewportScale({
  'font-size: '2vw'
});

Future development

In its current guise, this module can only be used by themers familiar with basic jQuery. I would be pleased to extend this module to provide a special field formatter with special settings for viewport height and width integrated with Display Suite and Field Group modules.