如何在Cordova或Phonegap上解决Android 4.0-4.3和4.4之间宽度不一致的问题？

Question

我正在使用Cordova 3.4开发一个应用程序，并在安卓4.4.2的Moto X、安卓2.3的三星Galaxy Ace和模拟器上进行测试。我使用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英寸，分辨率：720x1280，大小：正常，屏幕比例：长，密度：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之间的不一致性？

- Camilo

Answer 1

当我在控制台处理以下警告时，发现了问题：Viewport target-densitydpi is not supported. 通过搜索这个警告，我在这篇博客文章中发现 target-densitydpi 已经被弃用。

问题在于属性target-densitydpi=device-dpi 告诉视口将CSS像素的宽度设置为设备像素的宽度。因为Chrome上Android 4.4.2的视口忽略了该属性，所以它会缩放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的表现不如预期，因为该属性必须返回设备像素的宽度。但是这并不是一个问题，因为在删除target-densitydpi属性后，我的布局现在在Android 4.4.2和4.2.2上看起来相同（我也删除了问题中发布的媒体查询替代方案）。

- Camilo