CODEWITHSUNDEEP
angularjscordovaionic-frameworkinappbrowser
AppTest
AppTest

Reputation: 501

Reflow and resize inAppBrowser HTML in Ionic/Cordova

I'm testing the inAppBrowser plugin in Ionic (which uses Cordova) and the HTML appears very small in the emulator screen. When I test the same code in a separate browser within the emulator the text is much larger and more legible. Here's the code to open the site within inAppBrowser:

    var options = {
        location: 'yes',
        clearcache: 'yes',
        toolbar: 'no'
      };

$cordovaInAppBrowser.open("http://www.sec.gov/Archives/edgar/data/1288776/000128877615000035/goog10-qq22015.htm", '_blank', options)
        .then(function(event) {
          // success
        })
        .catch(function(event) {
          // error
        });

If I change _blank to _system a separate browser opens the HTML page better sized to fit the screen. But I'd like to see similarly sized text within the inAppBrowser.

How do I get the text to appear larger within the inAppBrowser window? Maybe some equivalent of the viewport meta tag?

Thanks.

Upvotes: 1

Views: 2782

Answers (2)

AppTest
AppTest

Reputation: 501

Injecting a viewport meta tag via the executeScript function appears to have (at least on my test page) worked. The text is larger, more legible and the bulk of the text fits the width of the screen.

    var options = {
        location: 'yes',
        clearcache: 'yes',
        toolbar: 'no'
      };

      var script = 
      "var meta = document.createElement('meta');"+
      "meta.name = 'viewport';"+
      "meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no';"+
      "document.getElementsByTagName('head')[0].appendChild(meta);";

      //$cordovaInAppBrowser.open(cordova.file.dataDirectory + "Documents/" + "sec.html", '_blank', options)
      $cordovaInAppBrowser.open("http://www.sec.gov/Archives/edgar/data/1288776/000128877615000035/goog10-qq22015.htm", '_self', options)
        .then(function(event) {
          // success
          $rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
            $cordovaInAppBrowser.executeScript({
              code: script
            });
          });
        })
        .catch(function(event) {
          // error
        });

You'll notice the meta tag is similar to the one you're likely have on your Ionic/Cordova index.html page. But this doesn't seem to be inherited by inAppBrowser so I've injected it after the page loads.

Upvotes: 2

Simon Prickett
Simon Prickett

Reputation: 4123

You can use the InAppBrowsers "insertCSS" function to add CSS to the InAppBrowser's browser view, as documented here.

For example something like:

iab.insertCSS({ code: "p { background-color: #ff0000; color: #ffffff; }" });

Then add the CSS you want to adjust relative sizes of page elements.

Upvotes: 0

Related Questions