iOS [iPad > Split-View > DetailView] Changes width when rotated

[Danneman101]

I've been spending the last copule of days finding a solution to how to approach the fact that the DetailViewController's width differs in horisontal (less than 768) vs vertical mode (768px).

I have a webview in the detailview, and use css to get the scaling of it correct.

Problem is, when rotating and thus changing the width of the ipad to horisontal-view, the webview seems to continue to interpret the width of the detailview (and thus itself) as 768px, effectively cropping the right margin of the webview.

I've been considering various possible solutions:


1. Changing the css to detect width automatically.

Even when setting the body's width to "auto" the webview seems to still consider the width to be 768px in landscape.

So apparently it doesnt receive any notification about the change.

I doubt this only being an issue on the simulator (I dont have the actual device yet) since everything else seem to be handled correctly when rotating it.


2. Changing the meta-tags in the html.

Ive tried several variations of the following meta-tags, with no result:

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.6">
<meta name="apple-mobile-web-app-capable" content="YES">
<link rel="stylesheet" href="main.css">

I've even tried swapping the css dynamically depending on what rotation the ipad is in:

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

Here is a demo of it: http://www.cloudfour.com/ipad-css/

Despite working on a regular webpage in safari when rotating the device, it will not execute the "landscape.css" in a split-view based app.


3. Resizing the RootViewController and DetailViewController so that the latter is still 768px in width when in landscape.

Googling this for a whole day, but NOTHING seems to indicate that you can do this without having to rebuild the whole split-view from scratch.


So what are the solution you have used? Certainly somebody else have built a split-view webview-based app for the ipad and encountered the same problem?

I could always simply have the app not rotating and adjust the css to work with just one rotation, but that would be a bit of a shame, and I think apple might object since they're really promoting "rotational choice".

 

[Danneman101]

It just dawned on me that the easies approach would be to resize the actual webview instead whenever the device rotated. That way, I could use the "auto"-sizing in the css-file.

Here's the code for anybody wanting to accomplish the same thing:

DetailViewController.m

// Called when webview is set up
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
	// CHECK:	LANDSCAPE
	if ( (self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft) || (self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) )
	{
		webView.frame = CGRectMake(webView.frame.origin.x, webView.frame.origin.y, 703, webView.frame.size.height);	
	}
	// CHECK:	PORTRAIT
	else
	{
		webView.frame = CGRectMake(webView.frame.origin.x, webView.frame.origin.y, 768, webView.frame.size.height);	
	}	
}


// Called each time a rotation of the device is accomplished
- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation {
	// CHECK:	LANDSCAPE
	if ( (self.interfaceOrientation == UIInterfaceOrientationLandscapeLeft) || (self.interfaceOrientation == UIInterfaceOrientationLandscapeRight) )
	{
		webView.frame = CGRectMake(webView.frame.origin.x, webView.frame.origin.y, 703, webView.frame.size.height);	
	}
	// CHECK:	PORTRAIT
	else
	{
		webView.frame = CGRectMake(webView.frame.origin.x, webView.frame.origin.y, 768, webView.frame.size.height);	
	}		
}

Also, in each html-file containing a meta-tag setting the width to a minimum of 1.0, you need to reset it to something lower than that, for instance:

<meta name="viewport" content="width=device-width, minimum-scale=0.1, maximum-scale=1.6">

 

[PhoneyDeveloper]

For some reason the webview doesn't do this automatically. This works for me

- (void)didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation
{
	[self.webView reload];
}

Also see

http://discussions.info.apple.com/thread.jspa?threadID=2412283

 

[Danneman101]

That's strange - it should trigger each time. I'm using the simulator, though - are you by any chance experiencing this on the device?

 

[PhoneyDeveloper]

I'm not using a webview in a splitview. It's just a simple webview on iPhone or iPad. I noticed that when the device rotates although the webview does resize it doesn't resize its contents. The code I show is how I work around that.

 

[Danneman101]

Ok, I think Ill add that in just in case, even though its working at the moment. Thanks for the heads-up

 

[teddynewell]

Thanks – Danneman101's suggestion worked perfectly with a UITableView, too.