css - 在没有 target-densitydpi=device-dpi 的情况下调整 Phonegap 应用程序 UI

Question

我已经使用 Phonegap 为 Android 平台创建了一个应用程序。为了补偿不同的设备分辨率 (dpi) 和屏幕尺寸，所有 UI 元素的尺寸都以 em 为单位指定。然后我使用 CSS 媒体查询使用 -webkit-device-pixel-ratio 设置不同的基本字体大小。在我发现 target-densitydpi=device-dpi 已被 webkit 弃用并且将来会删除支持之前，一切都按预期正常工作。这是删除 target-densitydpi 之前的元视口(viewport)标签:

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

我发现当我删除 target-densitydpi 时，应用程序看起来不再像预期的那样，实际上视口(viewport)的尺寸显着减小。以下是在宽度为 480px 和 window.devicePixelRatio 为 1.5 的 Xperia L (Android 4.1.2) 上截取的前后屏幕截图:

删除 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 的屏幕