Cordova InAppBrowser Doesn't scale the page loaded

Question

Can anyone please help me get the external page that the Cordova InAppBrowser loads on Android app to fit to the phone screen size ?.

I am invoking the inapp browser from a Sencha Touch app using the follwing code.

 var opt = 'location=no,clearcache=yes,closebuttoncaption=Back,EnableViewPortScale=yes';
    window.open('http://sg-prod-mobilityapi.cloudapp.net','_blank', opt);

When ever I invoke the url I get the following screen

Could anyone please help me out ?.

Answer 1

If the external page fit to the browser viewport, it should have a responsive design. I gone through that url, in that the middle div is set with fixed width and height of 340x380 px. you can only enable the zooming in in app browser.

Also phonegap allow you to execute some scripts after loading the url, just like injecting scripts.

 var iabRef = window.open('http://sg-prod-mobilityapi.cloudapp.net', '_blank', 'location=yes');
     iabRef.addEventListener('loadstop', replaceCustomStyle);

 function replaceCustomStyle() {
    iabRef.executeScript({
        code: "var itm = document.querySelector('#Main div'); 
                   itm.setAttribute('style','width:100%');"
    }, function() {
        alert("Element Successfully Hijacked");
    });
}

Try this and it is documented here

Answer 2

Add this code into your index.html

<meta content=
    "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    name="viewport" />