Adjusting the viewport for iPad in Blogger (dynamic template) and Apple smart app banners: A tale of two meta tags

A viewport is the area of a webpage that a user will see on screen when visiting a website from a mobile device such as an iPhone or an iPad. Apple's thorough documentation describing it can be found here.

I use the blogger dynamic template for my blog with magazine as my default and on iPad apart from a few scrolling peculiarities it works fine. But the other day I turned the device from my usual landscape orientation into portrait and to my horror found the the right side of the web page was cut off.

In order to fix this I first selected "Template" from the left sidebar in blogger, then chose to "Edit HTML" and ignoring the warning I pressed "Proceed".

I then located this line of code:

<meta content='initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width' name='viewport'/>

and replaced it with this one

<meta content='initial-scale=0.8, maximum-scale=1.0, user-scalable=yes, width=device-width' name='viewport'/>

Now the content sits nicely in the centre even in portrait.

Finally, while I was there I added another line of code directly above the edited one to read

<meta content='app-id=582084676' name='apple-itunes-app'/>

This added an Apple smart banner to my site when viewed in iPad to advertise The Waking Prince for iPad, which I've been discussing in other posts. If you want to learn how to add your own smart banners and even gain some affiliate revenue see here.

Update: Blogger dynamic template now appears to default to classic layout.