Viewport and Cordova Tip

This post is more than 2 years old.

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. :\

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Jesse Monroy posted on 1/5/2016 at 5:47 AM

Hey Raymond,
I'm going through the Cordova/Phonegap blogs so that I can document the "versions". I'm also marking selected blog posts on several subjects - viewport as a subheading to webview. I find this post. I read it. I read the DOCS.

Those docs are ass-backwards. Who writes that kind of $#17!


Comment 2 (In reply to #1) by Raymond Camden posted on 1/5/2016 at 2:22 PM

Well, this *is* documented, but I think it calls out an important issue- recognizing the config values per platform and what the defaults are. I know I didn't consider them terribly important, but obviously they kinda are.