Ios – UIWebView not loading responsive web page correctly

iosios7uiwebview

I am trying to load a responsive web page into a UIWebview, using the following code in my UIViewController's viewDidLoad method:

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

Rather than loading the web page the way that it should look based on the UIWebView's frame size, it is setting the UIWebView's UIScrollView contentSize to some seemingly arbitrary size (larger than my web view frame size) and loading the responsive web page as it would look for that size frame.

If I try loading the url that I'm using in Safari, it rearranges correctly according to the browser window size.

I have tried setting the scalesPageToFit property to YES, although I don't actually want to scale the page, but have it behave responsively to the web view frame.

Does anyone have any ideas as to what is happening and how I could fix it?

Best Answer

I figured out what was happening. My UIWebView width on the iPad is smaller than the device width. The web page was using the device width to determine the width of the page (this code was in the <head> element):

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

I was able to fix the issue using something I found in another question (https://stackoverflow.com/a/13113820/472344):

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.querySelector('meta[name=viewport]').setAttribute('content', 'width=%d;', false); ", (int)webView.frame.size.width]];
}

Related Solutions

Objective-c – Display a webpage inside a UIWebView

If this is the exact code you're using then it can't work: the webView added to topView that is never put on screen anywhere.

You probably want to add the webView to the controller view, but a better place to do that might be viewDidLoad, where self.view can be used safely.

This code works for me:

- (void)viewDidLoad {
    [super viewDidLoad];
    self.webView = [[[UIWebView alloc]
        initWithFrame:CGRectMake(0, 0, 320, 480)] autorelease];

    NSString *urlAddress = @"http://www.google.com";
    NSURL *url = [[[NSURL alloc] initWithString:urlAddress] autorelease];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];

    [self.webView loadRequest:requestObj];

    [self.view addSubview:self.webView];
}

Iphone – UIWebView loading progress and adjust web page to fit the view page

To answer #1)

Instead of using a UIWebView, you can pull the webpage down as an NSData object using an NSURLConnection. When you get the initial response from your request from

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response

the webserver should return a value of "expected content size" (which should be included in the response). Then you will keep getting the following method called each time you receive data:

 - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data

Keep appending the data to an existing NSMutableData object. Then you can check the size of your current data object (NSMutableData.length) against the expected response size.

percentage = (myData.length*100)/theResponse.expectedContentSize;

Then you can update a progress bar with that percentage! When

- (void)connectionDidFinishLoading:(NSURLConnection *)connection

runs, use your data to call

[myWebView loadData:myData MIMEType:myMimeType textEncodingName:myEncoding baseURL:baseURL];

and it will load everything you pulled down into your web view.

Best Answer

Related Solutions

Objective-c – Display a webpage inside a UIWebView

Iphone – UIWebView loading progress and adjust web page to fit the view page

Related Topic