iOS WebView in Landscape

I am trying to integrate a WebView into my Unity project. I will also need to get call backs from the web pages where the javascript in the web page can make calls into Unity.

I have a great WebView plugin sample that I have adapted for my needs the works really well except for a single problem.

My app starts in Landscape and will always be in landscape. When I browse to the web page that we are using for our back end the page comes up just fine. I tap in the text field and the keyboard comes up. Everything is still great. I can hit the next and previous and still good.

The problem is when I dismiss the keyboard the web page width shrinks to the width it would be if the page were in portrait mode.

I want to keep this as lite weight as possible. I looked at uWebKit and Prime31. Neither of those allow for the web page javascript to call back into Unity like mine does, so I can’t use those. Plus they are heavy and expensive. What I have is so very close and lite weight if I could just solve this problem I would be golden. I just don’t know enough about Obj-c to solve it on my own.

There is more to this class than I am showing here. I am just showing the stuff related to init, changing to landscape and such along with the dealloc in case I am forgetting something there.

The only problem is when the keyboard goes away the width changes to portrait width (it is still oriented correctly however).

I will now show the code I am using:

#import <UIKit/UIKit.h>

extern UIViewController *UnityGetGLViewController();
extern "C" void UnitySendMessage(const char *, const char *, const char *);
extern void UnitySetAudioSessionActive(bool active);
extern void UnityPause(bool pause);

@interface WebViewPlugin : NSObject<UIWebViewDelegate>
{
	UIWindow *overlayWindow;
	UIActivityIndicatorView *spinner;
    
	UIWebView *webView;
	NSString *gameObjectName;
    
	CGRect orientedFrame;
}
@end

@implementation WebViewPlugin

- (id)initWithGameObjectName:(const char *)gameObjectName_
{
	self = [super init];
    
	CGRect bounds = [[UIScreen mainScreen] bounds];
	orientedFrame = CGRectMake(bounds.origin.x, bounds.origin.y, bounds.size.height, bounds.size.width);
    
	overlayWindow = [[UIWindow alloc] initWithFrame:bounds];
    
	float angle = M_PI_2;
	CGAffineTransform transform = CGAffineTransformMakeRotation(angle);
	[overlayWindow setTransform:transform];
    
	webView = [[UIWebView alloc] initWithFrame:orientedFrame];
	webView.delegate = self;
	webView.hidden = NO;
	webView.center = overlayWindow.center;
    
	[overlayWindow addSubview:webView];
    
	[overlayWindow makeKeyAndVisible];
	
	gameObjectName = [[NSString stringWithUTF8String:gameObjectName_] retain];
    
	return self;
}

- (void)dealloc
{
	[webView removeFromSuperview];
	[webView release];
	[overlayWindow release];
	overlayWindow = nil;
	[gameObjectName release];
	[super dealloc];
}

It turns out the problem was a totally different problem. It was the auto zooming that jQuery Mobile does in the WebView that iOS uses.

To fix this scaling issue all I had to do was modify the meta tag for the viewport as follows:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1" />

The important part is to have the initial-scale=1, minimum-scale=1 and maximum-scale=1 all match. At first I didn’t have the initial-scale=1 and it still zoomed when I didn’t want it to.