调整没有target-densitydpi = device-dpi的Phonegap应用UI

Question

我使用Phonegap为Android平台创建了一个应用程序.为了补偿不同的设备分辨率(dpi)和屏幕尺寸,所有UI元素的尺寸都是根据em指定的.然后我使用CSS媒体查询使用-webkit-device-pixel-ratio设置不同的基本字体大小.在我发现webkit不推荐使用target-densitydpi = device-dpi之前,所有东西都可以正常工作,并且将来也会被删除.在删除target-densitydpi之前,这是我的元视口标记:

<meta name="viewport" content="user-scalable=no, initial-scale=1, width=device-width, target-densitydpi=device-dpi">

我发现当我删除target-densitydpi时,应用程序看起来不再像预期的那样,实际上视口的尺寸会急剧减小.以下是在Xperia L(Android 4.1.2)上拍摄的前后截图,宽度为480px,window.devicePixelRatio为1.5:

在删除target-densitydpi之前:http: //imgur.com/c0Vnusk

删除target-densitydpi后:http: //imgur.com/06mnUlJ

该应用程序应该看起来像没有target-densitydpi的前截图,但我真的迷失了如何实现这一目标？它需要重写CSS值吗？有没有办法在不使用元标记的情况下强制执行target-densitydpi = device-dpi？

Answer 1

我使用jQuery找到了解决方案

我添加了以下代码,它现在按预期工作,(我已将id ='viewport'添加到我的meta html标记中)

var viewportScale = 1 / window.devicePixelRatio;
$("#viewport").attr("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale=0.2, maximum-scale=2, width=device-width");

这将支持window.devicePixelRatio范围从0.5到6的屏幕