我正在使用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之间的不一致性?