@emmanuel how hard do you think it is to give us access to viewport height/width which enabling us to set dynamic height/width for elements?
In the example site below the image adjusts to the viewport size. This allows the image to cover the entire page and adjust its height and width to the viewport.
I think this will open up allot of possibilities like full-screen maps, images, videos and displaying messages that are front and center the require user attention.
Please take a look at this website while changing the window height
Cross-browser @media (width) and @media (height) values
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.innerWidth and .innerHeight
gets CSS viewport @media (width) and @media (height) which include scrollbars
initial-scale and zoom variations may cause mobile values to wrongly scale down to what PPK calls the visual viewport and be smaller than the @media values
zoom may cause values to be 1px off due to native rounding
undefined in IE8-
document.documentElement.clientWidth and .clientHeight
equals CSS viewport width minus scrollbar width
matches @media (width) and @media (height) when there is no scrollbar
same as jQuery(window).width() which jQuery calls the browser viewport
Live outputs for various dimensions
verge uses cross-browser viewport techniques
actual uses matchMedia to obtain precise dimensions in any unit