Time for action – adding in the viewport and apple-mobile meta tags

Adding the tags is very simple.

  1. In your index.html head tags, place the following meta tags:
    <meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

What just happened?

We added three meta tags to our file to ensure the theme behaves as it should on mobile devices. Let's have a look at each:

  • The viewport meta tag is a Webkit requirement and not (yet) a W3C standard. The width property controls the viewport. As we'll be styling our layout based on the screen size, we'll want this set to device-width.
  • By setting the apple-mobile-web-app-capable meta tag to yes, the site will run in full screen mode (when selected by the users), meaning it will bump the address bar up out of the screen view once the page has loaded. Even though this meta tag has the word apple in it, it actually affects all Webkit-based browsers, so even Android devices should benefit from this tag.
  • On iOS devices the apple-mobile-web-app-status-bar-style specifies the status bar settings. This setting changes the color of the bar and then moves it out of the way or allows it to stay up at the top. If we set it to default it will stay its normal "iOS gradient-gray", but move up out of the way. We've changed to black (the only color you're allowed to change it to).
  • If we were to change it to black-translucent it would stay permanently over the top of the HTML content and be slightly transparent. If your users need access to the status bar while browsing the site, you might want to consider making this setting black-translucent.

Adding in content

We're now ready to add some text-based content. Even if you're designing a very visual theme, text is the most common element of a site, so you should be prepared to put a fair amount of thought into how it will be displayed.

Starting with the text

We'll start by adding some dummy text to our site. As we go along, we'll create elements for that content to go into, which will use up-to-date, semantic HTML5 elements.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset