Mobile-isticly optimized in 10 seconds

Websites render this way on mobile devices because they lack a simple meta tag. While the subject of mobile website optimization can be rather involved (especially when dealing with CSS media queries, which take longer than 10 seconds to understand), there is a simple trick that can at least can make your website render normally on a mobile device. And it can be done in 10 seconds.

Simply add the following meta tag in the head element of your website’s index page:

<span class='line-number'>1</span>

<code class='html'><span class='line'><span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span>
</span></code>

The viewport meta tag is supported by browsers on both iOS, Android, and by other device browsers including Internet Explorer Mobile on Windows Phone 8. This tag instructs a browser on how to properly display a webpage; without it, a webpage is, unfortunately, displayed mini-style on device browsers, which have a narrow width.

Thus, the viewport tag essentially zooms in the display of a webpage. In the case of the example tag above, the width of the website is set to the device’s width and the scale is set to 100% – this’ll allow the website to be displayed normally on a mobile device. Website visitors won’t have to squint or pinch and expand to just to read the site’s relevant text.

Paulund.co.uk has a really good write up regarding the usage of the viewport meta tag as well as CSS media queries; what’s more, the good folks who created HTML5boilerplate.com have a nifty presentation that’s worth a read too.

This story, "Mobile-isticly optimized in 10 seconds" was originally published by JavaWorld.