Twitter Bootstrap Question posted in

Twitter bootstrap – UIWebView Screen Fitting Issue

I have developed a website in Twitter Bootstrap, I am now using a UIWebView to display that site inside of an IOS app. I am getting it to display fine, but the screen is off and it is running off of the side of the screen… I feel like I might have my UIWebView configured wrong, the site looks like if I go to it in Safari on my mobile device, so I know the site is working properly.

It even displays Google wrong in the UIWebView…. I will display my code and 2 screen shots below(The first screenshot is what it currently looks like, the second is what it should look like and what it looks like in safari mobile :

ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIWebView *webView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];

NSURL *url = [NSURL URLWithString:@"http://www.google.com"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];

[_webView loadRequest:request];
_webView.scalesPageToFit = YES;
_webView.frame=self.view.bounds;

[_webView loadRequest:request];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

AS-IS Screen Shot

AS-IS Screenshot

TO-BE Screen Shot

To-Be Screenshot

Tags:

4

Answers


  1. 0

    You should add the following code after [_webView loadRequest:request]; : 

    _webView.scalesPageToFit = YES;

    and If your UIWebView is not located properly, add the following code too :

    _webView.frame=self.view.bounds;
    Login or Signup to reply.
  2. 0

    To me it looks like the UIWebView is not set up correctly in the Storyboard or Interface Builder. Do you use Auto Layout? If so, are the constraints set correctly?

    A simple way to make sure the UIWebView is displayed full screen would be to add 4 constraints that align it with the top, bottom, leading and trailing edges of its superview, e.g. like so:

    enter image description here

    EDIT: Here are some rough instructions on how to add those constraints.

    Login or Signup to reply.
  3. 0

    In the Utilities pane, select “Scales Pages to Fit”:

    desc

    In the view controller in which the web view resides, make sure you can view the boxes (or bounds) of the view (note: the bottom doesn’t appear because I couldn’t fit it within the image):

    desc2

    Code in view controller:

    #import "SomeViewController.h"

@interface SomeViewController ()

@end

@implementation SomeViewController
@synthesize webView;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    NSString *urlLink = @"www.google.com";
    NSURL *url = [NSURL URLWithString:urlLink];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webview loadRequest:urlRequest];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

    Photo of the other settings in the view controller:

    desc3

    Login or Signup to reply.
  4. 0

    No need to use loadRequest: two time, Use:

    - (void)viewDidAppear:(BOOL)animated{
    [super viewDidAppear:animated];
    [_webView reload];
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search