在Ionic/Cordova中回流并调整大小inAppBrowser HTML

我正在测试Ionic（使用Cordova）中的inAppBrowser插件，并且HTML在仿真器屏幕中显示得非常小。当我在模拟器内的单独浏览器中测试相同的代码时，文本更大更清晰。下面的代码内inAppBrowser打开网站：在Ionic/Cordova中回流并调整大小inAppBrowser HTML

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窗口中显示得更大？也许一些等效的视口meta标签？

谢谢。

来源

2015-10-05 AppTest

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

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

来源

2015-10-06 21:24:44 AppTest

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

例如像：

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

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

来源

2015-10-05 18:26:56

谢谢，但问题在于，您需要预先确定用户可能通过inAppBrowser访问的网站，并更改每个网站的所有CSS元素的大小。我认为，当你知道用户正在访问什么网站，并且没有太多需要调整大小的元素时，你的方法效果最佳。 – AppTest

你也可以尝试某种元标记注入方式，我已经成功地使用了上面的技术，当辍学到我知道不会有太大变化的页面时（常见问题解答等）。 –

如果注入元标记对我测试的其他网站不起作用，我会记住这一点。谢谢您的帮助。 – AppTest

在Ionic/Cordova中回流并调整大小inAppBrowser HTML

回答

相关问题