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

Discussion in 'iOS Programming' started by Danneman101, Aug 3, 2010.

  1. macrumors 6502

    Joined:
    Aug 14, 2008
    #1
    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:

    Code:
    <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:

    Code:
    <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".
     
  2. thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #2
    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
    Code:
    
    // 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:

    Code:
    <meta name="viewport" content="width=device-width, minimum-scale=0.1, maximum-scale=1.6">
    
     
  3. macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #3
  4. thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #4
    That's strange - it should trigger each time. I'm using the simulator, though - are you by any chance experiencing this on the device?
     
  5. macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #5
    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.
     
  6. thread starter macrumors 6502

    Joined:
    Aug 14, 2008
    #6
    Ok, I think Ill add that in just in case, even though its working at the moment. Thanks for the heads-up :)
     
  7. macrumors newbie

    Joined:
    Aug 30, 2010
    #7
    Thanks – Danneman101's suggestion worked perfectly with a UITableView, too.
     

Share This Page