How to make iOS UIWebView display a mobile website correctly?

问题

I am new to iOS app development and I just tried using UIWebView to display a mobile website in my app and was not quite successful.

What I did is just some minimal Xcode project configuration and coding that I found during some Googling efforts:

Create a new iOS application project in Xcode using the Single View Application template.
Drag a Web View from the Object Library to the View Controller scene of Main.storyboard.
While holding down the Control key, drag the Web View from the View Controller scene to the ViewController.h editor, resulting a source code line like this:
```
@property (weak, nonatomic) IBOutlet UIWebView *myWebView;
```

Add the following code in ViewController.m:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSURL *url = [NSURL URLWithString:@"http://www.amazon.com"];
    [self.myWebView loadRequest:[NSURLRequest requestWithURL:url]];
}

This is all what I did (and also everything those tutorials told me). After I built and ran the app (on simulator and on real iphone device), the site did load in the app's view (and did load the mobile version instead of the PC version), but it displayed the site as if the view were much larger than the actual iphone screen. Here is a screeshot (Amazon in this case but basically the same for other sites):

What should I do to make the iOS UIWebView display a mobile website correctly?

Just tried Dipen Chudasama's suggestion of disabling the "User Size Classes" option, for the first time of all those suggestions, the result did change a little bit (from left-align to sort of center-align), but still not what I am looking for. Here is the screenshot:

EDIT:

Thanks for all the suggestions given by you enthusiastic people. Loading a site like amazon.com in a UIWebView should be a rather easy task as I understand, nevertheless, I didn't succeed with any of the suggestions.

It would be great if anyone could share with me (via Github or alike) just an sample xcode project (starting from scratch with the latest version of xcode tool chain) with nothing but a UIWebView that could load amazon.com correctly. That way I can do a line by line diff and may be able to find what I did wrong in my own project.

回答1:

The UIWebView has a property called "scalesPageToFit":

self.myWebView.scalesPageToFit = YES;
self.myWebView.contentMode = UIViewContentModeScaleAspectFit;

should do the trick.

回答2:

You can scale the page to fit the screen width with this UIWebview property webView.scalesPageToFit = YES;

Otherwise you can run a js command in the UIWebView to do the scale:

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

回答3:

I got it..you just set iPhone size view in storyboard instead of any size, means disable Use Size Classes Check box and see, this will work..:)

- (void)viewDidLoad {
    [super viewDidLoad];

    NSURL *url = [NSURL URLWithString:@"http://www.amazon.com"];
    [self.myWebView loadRequest:[NSURLRequest requestWithURL:url]];
}

Thats it, Try this one only.

 you have to set appropriate constraint for this.

回答4:

I had the same issue as you @goodbyeera, and then realized I hadn't set the AutoLayout constraints on the UIWebView. Therefore, when the WebView loaded it was too big for the iphone screen. By adding the constraints to fit the UIWebView to the screen fixed it all. Hope this might help you.

来源：https://stackoverflow.com/questions/28984448/how-to-make-ios-uiwebview-display-a-mobile-website-correctly

标签

ios

iphone

xcode

html5

uiwebview