title: iOS Second Screen
body: <p>I am using the PhoneGap ExternalScreen plugin, but I have modified it slightly to be able to support multiple resolutions. I got some tips from Matt Gemmel's post on iPadVGAOutput (http://mattgemmell.com/2010/06/01/ipad-vga-output/) Here is what my code looks like:</p>
  
  <pre><code>- (void) toggleResolution:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options
  {
      self.callbackID = [arguments pop];
      if ([[UIScreen screens] count] &gt; 1){
          externalScreen = [[[UIScreen screens] objectAtIndex:1] retain];
          screenModes = [externalScreen.availableModes retain];
          UIAlertView *alert = [[[UIAlertView alloc] initWithTitle:@"External Display Size"
                                                      message:@"Choose a size for the external display."
                                                      delegate:self
                                                      cancelButtonTitle:nil
                                                      otherButtonTitles:nil] autorelease];
  
          for (UIScreenMode *mode in screenModes){
              CGSize modeScreenSize = mode.size;
              [alert addButtonWithTitle:[NSString stringWithFormat:@"%.0f x %.0f pixels", modeScreenSize.width, modeScreenSize.height]];
          }
          [alert show];
      } else {
          PluginResult* pluginResult = [PluginResult resultWithStatus:PGCommandStatus_ERROR messageAsString:WEBVIEW_UNAVAILABLE];
          [self writeJavascript: [pluginResult toErrorCallbackString:self.callbackID]];
      }    
  }
  
  
  
  - (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
  {
      UIScreenMode *desiredMode = [screenModes objectAtIndex:buttonIndex];
      externalScreen.currentMode = desiredMode;
      externalWindow.screen = externalScreen;    
      [screenModes release];
  
      CGRect rect = CGRectZero;
      rect.size = desiredMode.size;
      externalWindow.frame = rect;
      externalWindow.clipsToBounds = YES;
  
      externalWindow.hidden = NO;
      [externalWindow makeKeyAndVisible];
  
      PluginResult* pluginResult = [PluginResult resultWithStatus:PGCommandStatus_OK messageAsString:WEBVIEW_OK];
      [self writeJavascript: [pluginResult toSuccessCallbackString:self.callbackID]];
  }
  </code></pre>
  
  <p>The resolution is changing just fine, but the content is not being constrained inside of the correct dimensions. An example is as follows:</p>
  
  <p>When the second screen is originally loaded (at 1920x1080), it looks like this: <a href="http://cl.ly/F5IV" rel="nofollow">http://cl.ly/F5IV</a></p>
  
  <p>After changing the resolution to 1280x720, it looks like this: <a href="http://cl.ly/F41K" rel="nofollow">http://cl.ly/F41K</a></p>
  
  <p>I am relatively new to Objective-C, but am quickly picking it up. Any pointers on solving my problem and/or improving the code altogether would be great. Thanks!</p>
  
  <p>Andrew</p>
  
  <p><em><strong>EDIT</strong>: I also wanted to clarify, I am not manually setting any width/height on any of the views and/or CSS that is being displayed.</em></p>