Solved

Force page orientation on tablet

Posted on 2013-06-20
4
1,041 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 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
help thx 6 36
ASP.NET data base connection 35 95
Display Flex does not Wrap Items 2 46
CSS Formatting Getting Stripped 1 35
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

738 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