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

的屏幕

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

1 个答案: