Solved

iPad orientation 2 different files

Posted on 2014-07-31
5
26 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
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

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

Suggested Solutions

This article describes in detail how to set up the iPad in the Enterprise using iPCU aka iPhone Configuration Utility.  This could also be used for the iPhone although I have not detailed out any differences. Preparation as an iPad Administrator:…
In this article we will discuss some EI Capitan Mail app issues and provide some manual process to resolve them.
Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…
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.

920 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