Question

我正在测试Ionic中的inAppBrowser插件（使用Cordova），并且HTML在模拟器屏幕中显得非常小。当我在模拟器中的单独浏览器中测试相同的代码时，文本更大，更清晰。以下是在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
        });

如果我将_blank更改为_system，则单独的浏览器会打开更适合屏幕大小的HTML页面。但是我希望在inAppBrowser中看到类似大小的文本。

如何让文本在inAppBrowser窗口中显得更大？也许一些等效的视口元标记？

感谢。

Answer 1

通过executeScript函数注入viewport meta tag似乎（至少在我的测试页面上）有效。文本更大，更清晰，文本的大部分符合屏幕的宽度。

    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
        });

您会注意到元标记与您在Ionic / Cordova index.html页面上可能具有的标记类似。但是这似乎没有被inAppBrowser继承，所以我在页面加载后注入了它。

Answer 2

您可以使用InAppBrowsers＆＃34; insertCSS＆＃34;函数将CSS添加到InAppBrowser的浏览器视图中，如文档here所述。

例如：

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

然后添加要调整页面元素相对大小的CSS。

在Ionic / Cordova中重新流动并调整inAppBrowser HTML

2 个答案: