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

Question

我正在Cordova 3.4上做一个应用程序,用Android 4.4.2测试Moto X,用android 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之间的这种不一致的最佳方法是什么？

Answer 1

我在控制台上处理此警告时发现了问题:Viewport target-densitydpi is not supported.搜索此警告,我发现此博客文章已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没有按预期工作,因为该属性必须返回设备像素的宽度,但这不是问题,因为现在我的布局在删除target-densitydpi属性后在Android 4.4.2和4.2.2上看起来相同(我还删除了问题上发布的媒体查询替代方案).