Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Force page orientation on tablet

Posted on 2013-06-20
4
Medium Priority
?
1,052 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

670 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