iOS Web Page Local

As a strategy, we sometimes use local html as smart phone page.
The nice thing is easy to arrange.
Compare to native application, web page layout is easier for designer.
And share resource with several platforms(Android, iOS, etc…).

Prepare Local HTML file

This is my sample HTML file

<!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=yes" />
<h1>Smart Phone Web</h1>
<p>This is Test</p>

I saved this file under project.
html file

Objective-C code

@interface InternalHTMLViewController ()
@property (nonatomic) UIWebView *web;

@implementation InternalHTMLViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    return self;

- (void)viewDidLoad
    [super viewDidLoad];
    // Web view
    self.web = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.web.scalesPageToFit = YES;  // Enable pinch out or not
    self.web.delegate = self;
    self.web.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;  // This is key
    [self.view addSubview:self.web];
    // Load web page
    NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]];
    NSURLRequest *req = [NSURLRequest requestWithURL:url];
    [self.web loadRequest:req];

#pragma mark - UIWebViewDelegate
-(void)webViewDidStartLoad:(UIWebView*)webView {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES;  // Indicator on

-(void)webViewDidFinishLoad:(UIWebView*)webView {
    [UIApplication sharedApplication].networkActivityIndicatorVisible = NO;   // Indicator off

To fix orientation problem, that is

self.web.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;


portrait html

Smart phone web site is another topic. I need to learn.