UIWebView content size in iOS 8

Question

I'm trying to display some content in a web view that's smaller than the screen. This works in iOS 7, but in iOS 8 the web view seems to automatically set the content size for the web view to the screen size. How can I convince UIWebView to use the view size for the content size in iOS 8?

I've created a minimal example that illustrates the problem. Starting from Xcode's single-view iPad template, I added a web view that's 480px tall and 320px wide, centered in the parent view. I connected that to a webView outlet in the existing view controller. I then added some code to -viewDidLoad to load a .mp4 video into the web view. Here's the complete code:

@interface ViewController ()

@property IBOutlet UIWebView *webView;

@end

NSString *const videoURL = @"https://dl.dropboxusercontent.com/u/29161243/Mahalo%2520Surf%2520Eco%2520Festival%25202014%2520-%2520Day%25204-SD.mp4";

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:videoURL];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

@end

Under iOS 7, this does exactly what I want. The result looks like this:

Under iOS 8, however, the video is enlarged and shifted down; it looks like the content size is the same as the screen size, with the content's origin at the origin of my web view:

How can I get the iOS 7 behavior in iOS 8? Alternatively, how can I adjust the web view content size?

Even under iOS 7, UIWebView often shows some content (eg HTML pages) at a size that's larger than the web view frame. I'd also like to learn how to get the web view to scale this kind of content so that it's drawn completely inside the web view's width, but right now this is a secondary concern compared to getting video content scaled to the view.

Answer 1

Change your viewDidLoad method to:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.webView.mediaPlaybackRequiresUserAction = NO;
    NSString *videoHTML= [NSString stringWithFormat: @"<style type='text/css'>body { margin:0;background-color:black}</style><video width='%f' height='%f' frameborder='0' controls autoplay><source src=\"%@\" type=\"video/mp4\"></video><meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'>", self.webView.frame.size.width, self.webView.frame.size.height,videoURL];
    [self.webView loadHTMLString:videoHTML baseURL:nil];
}

While there is a lot going on in that html, the key is:

<meta name='viewport' content='width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0'> 

vs the default version:

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

We had a similar issue that popped up in iOS8 and this fixed it. I also tried your example code and it also fixed it there.

You can read up on the viewport stuff here: https://developer.apple.com/library/IOS/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Hope this helps!

Answer 2

You can use constraints and auto layout to make the web view fill out the whole screen, set the constraints of web view in wAny | hAny size class will make it apply to any device.