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

Question

我正在 Cordova 3.4 上做一个应用程序，并在装有 Android 4.4.2 的 Moto X、装有 Android 2.3 的三星 Galaxy Ace 和模拟器上进行测试。我保留由 cli 创建的原始视口(viewport):

<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 之间这种不一致的最佳方法是什么？

Answer 1

我在控制台上处理此警告时发现了问题:Viewport target-densitydpi is not supported. 搜索此警告，我在 this blog post 上找到了target-densitydpi 已弃用。

问题是属性 target-densitydpi=device-dpi 告诉视口(viewport)使 CSS 像素的宽度等于设备像素的宽度。因为 Android 4.4.2 上的 Chrome 视口(viewport)会忽略该属性，所以它会缩放 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 上(我还删除了问题上发布的媒体查询替代方案)。