Getting iPhone's mobile twitter webapp inside UIWebView

Question

Ok, here's the scenario: I'm building an iPad app that will display an UIWebView, width = 320 pixels (or points now). It will wind of a "widget" inside the app.

I had to modify the user-agent of the webview to make it display the mobileversion, instead of the desktop version, by doing this on self.viewDidLoad.

NSDictionary *dictionnary = [[NSDictionary alloc] initWithObjectsAndKeys:@"Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1        Mobile/9A334 Safari/7534.48.3", @"UserAgent", nil];
[[NSUserDefaults standardUserDefaults] registerDefaults:dictionnary];

I'm also setting the webview's frame to be 320 pixels wide, and settings scalesPageToFit to YES.

Ok, but here's the problem: The webview displays the mobile version, but the TABLET mobile version, the one that probably would appear on Honeycombs tablets. It's kinda of a giant iPhone web app, with something like 600 pixels wide. The frame of UIwebView is 320px wide, but it's content is much wider.

I dont' understand what may be happing, since the user-agent is being set to be Mobile Safari on iPhone. Any idea about how to make this 320px wide UIWebView display the exactly same version that you get when you type mobile.twitter.com on iPhone's Mobile Safari?

EDIT: Ok, the problems seems to be related to the fact that twitter webapp uses the "device-width" to determine which webapp to show to the user.

I found this solution: displaying Wiki mobile page in UIWebView within UIPopoverController

It kinda of works:

 -(void)webViewDidFinishLoad:(UIWebView *)webView{
if (hasLoaded == NO){
     NSString *webHTML = [NSString stringWithContentsOfURL:self.webView.request.URL encoding:NSUTF8StringEncoding error:NULL];
     NSRange range = [webHTML rangeOfString:@"device-width"];
     if ((range.location!=NSNotFound)&&(range.length != 0)) {   
          webHTML = [webHTML stringByReplacingOccurrencesOfString:@"device-width" withString:@"320" options:0 range:range];
          [self.webView loadHTMLString:webHTML baseURL:[NSURL URLWithString:@"http://mobile.twitter.com"]];
          hasLoaded = YES;
      }
}

It changes the device-with on the code to 320, that's perfect, BUT... when the webview reloades (with the new code) I get the OLD (very old) twitter web app, instead of the current one. Any idea about how to fix that?

Try setting the URL to hosting.iptcom.net/phpinfo.php, then check to see what User-Agent is set to. Is it this one or the default iPad one (each is a different problem)? — Lou Franco
I found out that it has nothing to do with user-agent, but with the value "device-width" the webview gets when it's loading. So, since I'm on the iPad, I'm getting an webapp that is 768 px wide. Look at my EDIT. It kinda of solves the size problem. But creates a new one :/ — JulianoRossi

Jimmy_m Jimmy_m · Accepted Answer · 2012-10-28T22:49:20

This seems to be a better solution because it doesn't require reloading the HTML: https://stackoverflow.com/a/6104537/1449618

The following works in my app on iPad.

Set self as UIWebViewDelegate then:

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

Getting iPhone's mobile twitter webapp inside UIWebView

1 Answers