Cordova viewport problem solved

If you are facing the auto zooming problem of cordova then go read on the full article. Cordova actually ignores the viewport meta tag which causes the pixel density problem. So we need to tell cordova that viewport tag is equally important as other tags. To do this, we need to add some code to a file which is specify in the article.

Corodva messes with pixels

If you are using the latest cordova version or creating the cordova app for latest android versions then you may have faced the zoom malfunctioning.I also faced it when creating an app. Many of you may have already searched the web and found the answer of changing the meta tag attributes to get it working. But adding target-densitydpi=medium-dpi does not solve the problem for latest android versions. It may work for gingerbread but not for kitkat and others. So the final solution which i found was one of the stackexchange answer but rarely found. So i am gonna two things here, i will direct you that answer and also add some modifications to get the work done.


The answer specifies some code which is

this.appView.getSettings().setUseWideViewPort(true);

this.appView.getSettings().setLoadWithOverviewMode(true);

This code works excellent but needs some modifications considering the changing versions of cordova.

Modifications to the code

Now the modifications. The file to which these two lines need to be added is SystemWebViewEngine.java which can be found at C:\Users\kapilgarg\apps\myApp\platforms\android\CordovaLib\src\org\apache\cordova\engine

• Open the file.
• In that file you will find a methid initWebViewSettings(){} .
• In that method find the declaration of the variable settings.
• Just after the settings declaration, there would be some lines like this
  settings.setJavaScriptEnabled(true);

settings.setJavaScriptCanOpenWindowsAutomatically(true);

settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);
• Add the follwing lines after the settings declaration.
  
  settings.setUseWideViewPort(true);

settings.setLoadWithOverviewMode(true);
  
• Now add it to the html files <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
• Thats it, now just run the command cordova build android

• Stack Overflow Answer