Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Force page orientation on tablet

Posted on 2013-06-20
4
Medium Priority
?
1,061 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 2000 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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

926 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