Change header meta tags based on whether the app is running in browser or as mobile app


#1

Hi,

In my web app, I’d look to allow the user to zoom in and out so this is the viewport I use:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

When I use these settings for a cordova version of the same app, the user isn’t able to zoom in and out. This is the default cordova setting which is fine, but the problem is that when the user clicks on an input field, the screen automatically zooms in and the user can no longer zoom out to the original size after he’s filled out the form.

The solution to this is to use:

  <meta name="viewp`indent preformatted text by 4 spaces`ort" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, user-scalable=0"/>

But how do have one setting in the web app and one in the cordova app? Using an if isCordova block would solve the solution, but meteor doesn’t allow me to do this. Is there another way to solve the solution?


#2

Similar post to this one: [Solved] Can I put meta tag inside `<head>` conditionally? Is it possible?

You can’t use logic in the head tag.

Check this answer out: http://stackoverflow.com/a/2568915/601455