在 Ionic/Cordova 中的 AppBrowser HTML 中回流和调整大小

Question

我正在 Ionic（使用 Cordova）中测试 inAppBrowser 插件，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 window 中显示得更大？也许某些等效于视口元标记？

谢谢。

Answer 1

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

例如：

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

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

Answer 2

通过 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 继承，所以我在页面加载后注入它。

在 Ionic/Cordova 中的 AppBrowser HTML 中回流和调整大小

Reflow and resize inAppBrowser HTML in Ionic/Cordova

angularjs

cordova

ionic-framework

ionic

inappbrowser