Making this blog work as an app on the iPhone (part 1)

12 years ago

With the iPhone you easily view a web site in Safari, but you get the annoying bits of chrome at the top (the address bar) and at the bottom (the buttons). What if you wanted your site to occupy the whole of the screen? Well, you can pin the site to the Home screen and, provided that you make a few changes to the HTML, CSS, and JavaScript, you can make your site behave as if it were pretty much a native app.

iPhone close-upFirst of all, like it or not, you’ve got to write your HTML and CSS to serve the content properly on a small screen (320px across in portrait mode, 480px in landscape mode). For readers’ small mobile devices, I created a special abbreviated form of this blog’s home page that just displays the first 500 characters or so of the post rather than all of it. That way the user can read the summary and, if they are enticed by the promise of a good article, they can tap the “Read more…” link.

To style this abbreviated content I have, in essence, two containers: the first for the header (whose id is imaginatively called “header”), and the second for the rest of the page (with an id of “wrapper”). We’ll be making more use of these div containers in part 2. 

<body>
  <div id="header">
    <h1><em>Algorithms for the Masses</em><br />by Julian M Bucknall</h1>
  </div>
	
  <div id="wrapper">
  
    <!-- content goes here -->

 </div><!--end of wrapper -->
</body>

The main reason for creating these divs is to style them when the user changes the orientation of the device from portrait to landscape. For the initial CSS I had this:

#header {width:320px;}
#wrapper {width:320px;}

Which are the defaults for portrait mode.

Now we hit the fun parts. The first bit is to suppress the natural tendency for Safari on iOS to increase the size of the font when you switch from portrait to landscape (in essence Safari zooms the content to fit). Since one of the things I wanted to do was to display the content properly in landscape mode across the screen, I had to suppress this default in CSS:

html, body {-webkit-text-size-adjust: none;}

This magic CSS style will suppress the default behavior of iOS Safari to increase the text size when the device is re-oriented. Essentially you would add it to any element style you want to: here I reset the entire body element.

Now we need to add some magic sauce to the HTML markup in the head element. 

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

This line instructs the iOS Safari that we are going to be responsible for defining the width of the content (it will be equal to the device’s physical width), and that we will be suppressing the zoom feature. When you view “normal” web pages in iOS Safari you can pinch to shrink the page or spread your fingers to expand the display. This meta tag essentially tells Safari that the site knows what it is doing with regard to the content and that the pinch gesture is not necessary.

Now for some JavaScript (yes, all this magic couldn’t be done without some JavaScript). We want to make sure that the content restyles itself when the user re-orients the device form portrait to landscape. To do this we make use of the window.onorientationchange event and the window.orientation property value.

var changeOrientation = function () {
  currentOrientation = window.orientation;
  if ((currentOrientation === 0) || (currentOrientation === 180)) {
    $("#header").css("width", 320);
    $("#wrapper").css("width", 320);
  }
  else {
    $("#header").css("width", 480);
    $("#wrapper").css("width", 480);
  }
};

var wireUpOrientationChange = function () {
  changeOrientation();
  window.onorientationchange = changeOrientation;
};

First of all we have the wireUpOrientationChange function, called when the page is initially loaded (document ready in jQuery terms). This calls the changeOrientation method to initialize the correct orientation at the moment the page is initially displayed, and then sets the event handler to track the changes to the device’s orientation from then on.

The changeOrientation method does the real work. It read the current orientation and if it’s 0 or 180 it assumes portrait mode, and anything else (actually –90 or 90 – the orientation is a value in degrees) it assumes landscape mode. In either case it alters the width style of the CSS for both the header and wrapper divs appropriately. Note the use of jQuery here; yes, jQuery is being loaded by the overall HTML page.

These changes will be enough to make iOS Safari display the web site appropriately in either portrait or landscape mode. Next time we shall look at how to pin the site to the Home screen and what needs to happen to fake the “native app'” look and feel.

Now playing:
Hancock, Herbie - One Finger Snap
(from The Best of Herbie Hancock: The Blue Note Years)

Mon 12-Mar-2012 9:29 PM Blog / tags: javascript css html5
Loading similar posts...   Loading links to posts on similar topics...

No Responses

Feel free to add a comment...

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response