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

【问题标题】：Adjust Phonegap app UI without target-densitydpi=device-dpi在没有 target-densitydpi=device-dpi 的情况下调整 Phonegap 应用程序 UI
【发布时间】：2014-02-23 13:16:20
【问题描述】：

我使用 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 时，应用程序看起来不再像预期的那样，实际上视口的尺寸急剧减小。以下是在宽度为 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？

【问题讨论】：

Support for target-densitydpi is removed from WebKit的可能重复

标签： css cordova webkit

【解决方案1】：

我找到了使用 jQuery 的解决方案

我添加了以下代码，它现在按预期工作，（我已将 id='viewport' 添加到我的元 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 的屏幕

【讨论】：

你也可以不使用 jQuery：document.getElementById("viewport").setAttribute("content","user-scalable=no, initial-scale="+viewportScale+", minimum-scale =0.2, 最大比例=2, 宽度=设备宽度");