change css on viewport based sizes

viewport.css

#id{
    background: #999;
    position: fixed;
    top:0;
    width: 100%;
    height: 10em;
    z-index: 99999999999999;
    padding-top:4em;
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -o-transition: all linear 1s;
    -ms-transition: all linear 1s;
    transition: all linear 1s;
}

viewport.html

<header id="id">
    <h1>this is my headline</h1>
    <p>This is just a testing site without content</p>
</header>

viewportcss.js

$(window).resize(viewport);

function viewport(){
    if(window.innerHeight<900)
    {
        $("#id").css("height","6em").css("padding-top","0");
    } 
    else if(window.innerHeight>900)
    {
        $("#id").css("height","10em").css("padding-top","4em");
    }
    return;
}

@anselmh I hear you. Been looking for a non-loading version of it all. I can't wait for the W3C to figure it out for me.

@susprod many are waiting for this. But still it needs to be implemented in UAs after a spec is released. Fortunately this is a thread by the WHATWG itself :-)