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的一部分，{{3}}是一个免费的基于云的PhoneGap开发工具。

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

1 个答案: