Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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:

  1. Create a new iOS application project in Xcode using the Single View Application template.

  2. Drag a Web View from the Object Library to the View Controller scene of Main.storyboard.

  3. 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;
    
  4. 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):

enter image description here

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:

enter image description here


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.

like image 356
goodbyeera Avatar asked Nov 01 '22 08:11

goodbyeera


1 Answers

The UIWebView has a property called "scalesPageToFit":

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

should do the trick.

like image 80
LoVo Avatar answered Nov 11 '22 04:11

LoVo