如何处理Cordova或Phonegap上android 4.0-4.3和4.4之间的宽度不一致？

我正在Cordova 3.4上做一个应用程序,并在 Android 4.4.2,带有android 2.3的三星Galaxy Ace和模拟器的Moto X上进行测试.我离开cli创建的原始视口：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

在CSS上我正在使用相对大小：

html {
    font-size: 62.5%;
}

p {
    font-size: 1.4rem;
}

这在两台设备上都可以正常工作,但是当我使用Android 4.2.2在LG G2上进行测试时,我看到文字较小.我在模拟器上测试了所有4.x Android版本,并在4.0到4.3版本上发现了同样的问题,然后我发现Android 4.4.2现在使用Chrome并且ViewPort的工作方式不同.

基于一些文章,视网膜显示器上的正常行为就像屏幕一样,css宽度小于设备宽度,这就是它在Android 4.4.2上的工作方式,但在4.0到4.3的工作方式不同.这是使用配置了此参数的仿真器对4.4.2和4.2.2之间的一些javascript属性进行比较：屏幕：4.7“,分辨率：720×1280,大小：正常,屏幕比例：长,密度：xhdpi.

4.4.2

- window.devicePixelRatio: 2
- screen.width: 360
- document.width: 360
- window.innerWidth: 360
- document.documentElement.clientWidth: 360
- document.documentElement.offsetWidth: 360
- document.body.clientWidth: 360

4.2.2

- window.devicePixelRatio: 2
- screen.width: 720
- document.width: 720
- window.innerWidth: 720
- document.documentElement.clientWidth: 720
- document.documentElement.offsetWidth: 720
- document.body.clientWidth: 720

我正在尝试的时间解决方案是使用媒体查询,但我认为它可能是平板电脑或其他设备上的问题.

html { 
  font-size: 125%;
} 
@media all and (max-width: 400px) {
  html { 
    font-size: 62.5%; 
  }
}

另一种解决方案可能是检查Android版本以设置html字体大小.

处理Android 4.0-4.3和4.4之间的这种不一致的最佳方法是什么？

我在控制台上处理此警告时发现了问题：不支持Viewport target-densitydpi.搜索此警告,我在 this blog post上发现不推荐使用target-densitydpi.

问题是属性target-densitydpi = device-dpi告诉视口使CSS像素的宽度等于设备像素的宽度.由于Android 4.4.2上的Chrome视口会忽略该属性,因此会缩放CSS像素宽度.

删除该属性,我得到了这个结果：

4.2.2

- screen.width: 720
- document.width: 360

4.4.2

- screen.width: 360
- document.width: 360

在Android 4.2.2上,screen.width没有按预期工作,因为该属性必须返回设备像素的宽度,但这不是问题,因为现在我的布局在Android 4.4.2和4.2.2之后看起来相同删除target-densitydpi属性(我还删除了问题上发布的媒体查询替代).