Solved

iPad orientation 2 different files

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Set up iPhone and iPad email signatures to always send in high-quality HTML with this step-by step guide.
Polish reports in Access so they look terrific. Take yourself to another level. Equations, Back Color, Alternate Back Color. Write easy VBA Code. Tighten space to use less pages. Launch report from a menu, considering criteria only when it is filled…
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.

706 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

12 Experts available now in Live!

Get 1:1 Help Now