动态调整视口大小 - Phonegap 忽略视口

Question

我正在使用以下代码“将我的应用调整为显示它的设备的屏幕尺寸：

$(function() {
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    var ww = ( $(window).width() < window.screen.width ) ? $(window).width() : window.screen.width; //get proper width
    var mw = 600; // min width of site
    var ratio =  ww / mw; //calculate ratio
      if( ww < mw){ //smaller than minimum size
      $('#vp').attr('content', 'initial-scale=' + ratio + '; maximum-scale=' + ratio + '; minimum-scale=' + ratio + '; user-scalable=yes; width=' + mw);
    }else{ //regular size
     $('#vp').attr('content', 'width=device-width; initial-scale=1.0');
    }
  }
});

我有一个 Nexus 4。如果我使用 chrome 打开网站，它就可以正常工作。 但是，如果我使用 phonegap，它只会忽略视口元标记。 （脚本正在运行，元标记的结果内容与使用浏览器时相同）。 我看到有很多关于忽略视口元标记的 phonegap 的问题，但其中很少有人提供任何解决此问题的方法。

Answer 1

PhoneGap 在 KitKat (4.4) 之前使用 Android WebView，Android WebView 不支持特定宽度的视口。解决方案是使用支持自定义视口支持的库。

一个选择是monaca.viewport.js，它分布在GitHub：https://github.com/monaca/monaca.js，这里是API reference。

这个库也是Monaca 的一部分，Monaca 是一个免费的基于云的 PhoneGap 开发工具。