How to make iOS UIWebView display a mobile website correctly?

To make iOS UIWebView display mobile websites correctly, you need to configure both the webview properties and viewport settings. Here are the most effective approaches:

Method 1: Using scalesPageToFit Property

The primary solution is enabling automatic scaling in your UIWebView:

mywebview.scalesPageToFit = YES;
mywebview.contentMode = UIViewContentModeScaleAspectFit;

This allows the webview to automatically scale content to fit the device screen width.

Method 2: JavaScript Zoom Control

For fine-tuned control, inject JavaScript to adjust the zoom level:

NSString *js = [NSString stringWithFormat:@"document.body.style.zoom = 0.8;"];
[webView stringByEvaluatingJavaScriptFromString:js];

Method 3: Viewport Meta Tag (HTML)

Ensure your HTML includes the proper viewport meta tag:

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

Method 4: Complete Configuration

For best results, combine multiple approaches:

// Enable scaling
mywebview.scalesPageToFit = YES;
mywebview.contentMode = UIViewContentModeScaleAspectFit;

// Inject viewport and zoom JavaScript
NSString *js = @"var meta = document.createElement('meta'); "
               @"meta.name = 'viewport'; "
               @"meta.content = 'width=device-width, initial-scale=1.0'; "
               @"document.getElementsByTagName('head')[0].appendChild(meta);";
[webView stringByEvaluatingJavaScriptFromString:js];

Comparison

Conclusion

Start with scalesPageToFit = YES for automatic scaling. For responsive websites, ensure proper viewport meta tags are present, and use JavaScript injection for fine-tuned control when needed.