Solved

iPad orientation 2 different files

Posted on 2014-07-31
5
41 Views
Last Modified: 2016-05-25
Hi

Is there any way of loading a different version of a page depending on the orientation of the iPad.
0
Comment
Question by:ronnie10164
[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
5 Comments
 
LVL 12

Assisted Solution

by:KRUNAL TAILOR
KRUNAL TAILOR earned 250 total points
ID: 40233549
Hi ronnie10164,

Try this below code in your controller.

   
 - (void)setOrientation:(UIInterfaceOrientation)interfaceOrientation
    {
        if (UIInterfaceOrientationIsPortrait(interfaceOrientation))
        {
            // do other stuff
        }
        else
        {
            // do other stuff
        }
    }

Open in new window


This can also handle an orientation change during the load process.

- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    [self setOrientation:toInterfaceOrientation];
}

Open in new window


Thanks & Regards,
Krunal T. Tailor
0
 

Author Comment

by:ronnie10164
ID: 40245195
Thanks I appreciate the advice.

Where i was coming from, is that using Adobe DPS generates a file with _h and _v as prefix and I wondered whether there was some way of doing this from the plist file or json files?
0
 
LVL 37

Accepted Solution

by:
zzynx earned 250 total points
ID: 40275669
I don't know if it will help you, but here's how you apply another style depending on the screen width and orientation in html5:

<!DOCTYPE html>
<html>
	<head>
		<title>Header</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scaleable=no">

		<!-- style sheet applied on smartphone screens in portrait -->
		<link href="style.css" rel="stylesheet" type="text/css" media="screen and (max-width:600px) and (orientation: portrait)">

		<!-- style sheet applied on smartphone screens in landscape -->
		<link href="style1.css" rel="stylesheet" type="text/css" media="screen and (max-width:600px) and (orientation: landscape)">

		<!-- style sheet applied on desktop screens -->
		<link href="style2.css" rel="stylesheet" type="text/css" media="screen and (min-width:601px)">
		<style type="text/css">

		canvas {
			border: 1px solid black
		}
		</style>
	</head>
	<body>

	</body>
</html>

Open in new window


You can test it with
style.css containing:
body {
	background-color: blue;
}

Open in new window

style1.css containing:
body {
	background-color: green;
}

Open in new window

and style2.css containing:
body {
	background-color: red;
}

Open in new window


In this case when you navigate to that page on you smartphone it will be blue in portrait mode and turn green when you turn your smartphone to landscape mode. On your desktop pc it will have a red background.

You probably have to tweak the max-width parameter for the iPad
0

Featured Post

Connect further...control easier

With the ATEN CE624, you can now enjoy a high-quality visual experience powered by HDBaseT technology and the convenience of a single Cat6 cable to transmit uncompressed video with zero latency and multi-streaming for dual-view applications where remote access is required.

Question has a verified solution.

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

iPad in the Business – Quick Start Part 1 Getting Started with Active Sync Mail Many people seem to have issues connecting their iOS device to their company Exchange Server and this article covers the steps for Active Sync configuration as wel…
A professional opinion on which Apple product to buy, and a tidbit about the WWDC.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

735 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