Force page orientation on tablet

On mobile tablet (es. Ipad). Is possible to force and lock orientation to the landscape view by stylesheet or meta attribute?
DecisionistiAsked:
Who is Participating?
 
Jagadishwor DulalConnect With a Mentor Braces MediaCommented:
One of the solution is
$('body').css({
   "-webkit-transform": "rotate(90deg)"
   put other browsers here
}); 

Open in new window


if any problem try this one manage your width:
$(document).on('pagebeforeshow', '#ID',function() {        
                setTimeout(function() {
                                  $('head').append( '<meta name="viewport" content="width=device-height, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">' );
                                  }, 200);
                       });

Open in new window


Better to read this
http://uxdesign.smashingmagazine.com/2012/08/10/designing-device-orientation-portrait-landscape/
0
 
DecisionistiConnect With a Mentor Author Commented:
Thanks very much for the answer, the second note is interesting because introduce the needs to setting appropriate meta viewport.
The "-webkit-transform" solution is ok but it seems to be integrated with another rule:
-webkit-transform-origin

I've found a solution to lock orientation to landscape mode using these style rules
.orientLeft {
	-webkit-transform: rotate(-90deg);
	-webkit-transform-origin: 560px 560px;
}
		
.orientRight {
	-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 485px 485px;
}

Open in new window


used by this js function
$(document).on( 'orientationchange', function() {
	
	if( window.orientation == 0 ) {
		document.getElementById( 'container' ).className = 'orientLeft';
	}
	if( window.orientation == -90 ) {
		document.getElementById( 'container' ).className = '';
	}
	if( window.orientation == 90 ) {
		document.getElementById( 'container' ).className = '';
	}
	if( window.orientation == 180 ) {
		document.getElementById( 'container' ).className = 'orientRight';
	}
			
}, true );

Open in new window


All used on a <div id="container"> that contains the entire page.
Without the "-webkit-transform-origin" browser move the page leaving some blank space left and above the page.
I'm working in refining the solution. All other comments are welcome!

Note: all this code is cabled on IPAD and Safari browser
0
All Courses

From novice to tech pro — start learning today.