Way back on October 9, 2011, when I was working on a hybrid mobile application, I had a key post for this category entitled “Viewport Meta Tag and Using HTML5/CSS3/jQuery to Build Mobile Interfaces”. The post had two key concepts vital to developing mobile applications with these technologies:
- Viewport Meta Tag
- CSS Media Queries
Although I identified these two key enablers, I was just learning at the time and fishing around, so I feel I didn’t give enough context and explanation (I gave an example of Media Queries without defining them or their purpose!). This post is an attempt to fill in the gaps.
I said, “Not only do I believe that it these technologies represent the present and future of Web Development, but also as a way to do cross-browser, cross-platform Mobile device UI development. Yes, you heard me right. These technologies make possible true cross-browser, cross-platform mobile web development for the first time. Some background. “
I talked about the Viewport and Media Queries but the context is what’s called Adaptive or Responsive Web Applications, in that the application can scale up and down with different devices. Several things have happened lately to make these things possible:
- Media tags to tell a mobile browser not to scale your site down
- New standards that make building sites that work well in multiple mobile browsers much easier
- New standards that make building sites that act more like web applications.
I talked about the Viewport meta tag: So what is the Viewport meta tag? The Viewport meta tag was introduced by Apple Mobile Safari to let Web Developers control the viewport’s scale and size. It’s now an universal standard. Unless you tell it otherwise, Safari on the iPhone is going to assume your page is 980px wide. If you are going to do mobile web development for the iPhone and Blackberry devices with the smaller dimensions, you have to let Mobile Safari, you must let Mobile Safari (or Ripple for the Blackberry) know about it by adding a viewport meta tag to the head element of the HTML documents which sets it to the device width:
<meta name="viewport" content="user-scalable=no, width=device-width" />
I showed an example of a media query but didn’t talk about it!
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
Media Queries (new with CSS3) are very powerful and I encourage you to read Dan Wahlin’s extensive post on them but the general idea is that they are a CSS expression than can evaluate to true or false. If true, the CSS selectors and properties of an expression will be applied. When combined with CSS cascading rules, it enables you to respond to different resolutions, orientations, or changes in resolution or orientation. This rule is basically saying, “for mobile devices with a device max width of 480px, apply the iphone stylesheet.