Question

我在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属性进行比较：screen：4.7＆＃34;，resolution：720x1280，size：normal，screen ratio：long，density：xhdpi。< / p>

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告诉视口制作CSS像素＆＃39;宽度等于器件像素＆＃39;宽度。由于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没有按预期工作，因为该属性必须返回设备像素＆＃39;宽度，但它不是问题，因为现在我的布局在删除target-densitydpi属性后在Android 4.4.2和4.2.2上看起来相同（我还删除了问题上发布的媒体查询替代方案）

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

1 个答案: