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!
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())