Solved

Force page orientation on tablet

Posted on 2013-06-20
4
1,013 Views
Last Modified: 2013-09-20
On mobile tablet (es. Ipad). Is possible to force and lock orientation to the landscape view by stylesheet or meta attribute?
0
Comment
Question by:Decisionisti
4 Comments
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39262039
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
 

Assisted Solution

by:Decisionisti
Decisionisti earned 0 total points
ID: 39263016
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now