How can I get the cordova InAppBrowser to display content similarly between iOS and Android?

Question

I'm using the cordova InAppBrowser to display content from an external site. When I open the browser on an iPhone, the zoom level of the InAppBrowser contents matches that of the rest of my app. When I navigate to the same place in my Android device, the InAppBrowser content appears zoomed way out and is very small and is difficult to read.

Does anyone know of a way to set or adjust the zoom level or viewport of the InAppBrowser for the Android device?

Note: I have some control over the styling of the content that is displayed in the InAppBrowser, but not the html or javascript for that site.

Answer 1

I found a way to change the android InAppBrowser viewport to be consistent with that of the iOS InAppBrowser. It requires modifying the cordova source code, but it's actually pretty easy to do... just need to change one line of code.

Here are some step-by-step instructions:

1. Download the cordova source code: "git clone https://github.com/apache/cordova-android.git"
2. Download the commons codec lib: http://ftp.carnet.hr/misc/apache//commons/codec/binaries/commons-codec-1.7-bin.zip
3. Open Android Developer Tools
4. Import the cordova project into your workspace (File > Import... > Existing Projects into Workspace)
5. Create a "libs" directory and copy the downloaded commons-codec-1.7.jar file into it.
6. Add a "gen" folder to the project (required by the .classpath file, but not included in the git download since git doesn't allow empty folders)
7. Go to Project > Build All. The project should build without errors.
8. Open InAppBrowser.java and search for "inAppWebView.getSettings().setUseWideViewPort(true);" (line 458 in the cordova version I downloaded).
9. Change "true" to "false" in that line.
10. Build the project again.
11. Copy the bin/cordova.jar file into whatever project you are using cordova in.

That will change the viewport to be consistent with the iOS InAppBrowser. If you prefer the wider viewport, but still want consistency among Android/iOS, you could probably do something similar in the cordova-ios source code to change iOS to use the wider viewport (but I haven't looked into that).

I got some of the information regarding obtaining the cordova source code and building the project from this google group: https://groups.google.com/forum/?fromgroups=#!topic/phonegap/mUcBcjPISgg