Yesterday I ran into an interesting thing with Cordova and I thought I'd share. I assume most folks are aware of the benefits of adding a meta tag specifying viewport when building mobile-friendly websites. If you aren't, here are a few examples demonstrating the idea. I created a quick Cordova application yesterday specifically to demonstrate this for the book I'm writing. Using the same base HTML, I made two applications and in one of them I used the meta tag.

When I viewed both applications in my mobile simulator, I noticed something odd. They both looked the exact same. I saw the same behavior in both iOS and Android. To make things even more confusing, I then used Mobile Safari to open up the www folders from the applications. The one without the meta tag demonstrated the problem that the tag was meant to solve. So what's going on?

If you look at the iOS configuration guide at the Cordova docs, you will notice this preference: EnableViewportScale. This preference allows you to specify a view port scale with the meta tag. The default is false. That explains it right there - and serves as a reminder to read, and read often the configuration guides. I tend to focus primarily on the JavaScript of my Cordova apps, but there is quite a bit you can do with the configuration values as well.

p.s. Someone needs to take the MediaPlaybackRequiresUserAction attribute and apply it to the web as a whole. :\