Screen lock orientation for mobile-webapp JS

Question

I'm trying to use the experimental screen orientation API:
http://www.w3.org/TR/screen-orientation/

I can implement this with this MDN recommandation:
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

Is there already exists a javascript/jquery plugins to do that now, with no css rotation trick or js inverted height and width ?

Thx!

Answer 1

Here's a solution I came up with, albeit a bit hacky.

HTML

<div class="wrap">
    <header></header>
</div>

CSS

html, body {
    margin:0;
    position:relative;
}
.wrap {
    background-color:black;
    width:300px;
    margin:0 auto;
    height:500px;
}
header {
    background-color:red;
    width:100%;
    height:80px;
}
.rotate {
    float:left;
    transform: rotate(-90deg);
}
.rotate:after { content:'';clear:both;width:0;height:0; }

JS

/**
 * rotatePage
 * Use isMobile() and isPortrait() to toggle classes, set w/h
 */
var rotatePage = function() {
    if ( isMobile() && !isPortrait() ) {
        console.log('Landscape')
        document.body.classList.add('rotate')

        document.getElementsByTagName('html')[0].style.height = window.innerHeight + 'px'
        document.body.style.height = window.innerHeight + 'px'
    }
    if ( isMobile() && isPortrait() ) {
        console.log('Portrait')
        document.body.classList.remove('rotate')

        document.getElementsByTagName('html')[0].style.height = 'auto'
        document.body.style.height = 'auto'
    }
}

/**
 * isPortrait
 * Check if viewport is in portrait by comparing window height/width
 * 
 * @return {Boolean}
 */
var isPortrait = function() {
    if ( window.innerHeight > window.innerWidth ) {
        return true;
    } else {
        return false;
    }
}

/**
 * isMobile
 * Check if the useragent string to verify mobile
 * 
 * @return {Boolean}
 */
var isMobile = function() {
    return (/Mobile|Android|iPhone|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera) ? true : false;
}


/**
 * Event Listeners
 */
document.addEventListener('DOMContentLoaded', rotatePage())
window.addEventListener('resize', rotatePage())