When building HTML5 mobile web sites that target multiple devices, one of the first elements you should include is the viewport meta tag.
Most mobile web browsers render incoming HTML in a virtual window that is typically wider than the screen of the mobile device. This is done so you can view non-mobile websites via panning, pinching and zooming. The negative side effect of this behavior is you often see tiny text, pictures and UI elements that are unusable. As you might imagine, this poor user experience contributes to the notion that mobile apps are superior to the mobile web. You can help correct this misconception by adding the viewport meta tag below inside the head tags of your web page:
<meta name="viewport" content="width=device-width, initial-scale=1">
This tag instructs your mobile browser to adapt the HTML content to the size of your mobile device instead of the width of a desktop browser. In our mobile-first world, one of the keys to success is to start small and target mobile browsers first instead of the other way around.
Sharing my knowledge and helping others never stops, so connect with me on my blog at https://robtiffany.com , follow me on Twitter at https://twitter.com/RobTiffany and on LinkedIn at https://www.linkedin.com/in/robtiffany
