如何动态更改 Phonegap Android 应用程序 target-densitydpi？答案

【问题标题】：How can I change Phonegap Android app target-densitydpi dynamically?如何动态更改 Phonegap Android 应用程序 target-densitydpi？
【发布时间】：2014-01-26 23:54:46
【问题描述】：

我正在使用 Phonegap 开发一个安卓应用程序。我在 320px * 480px 视口尺寸上完成了开发。为了让应用程序在所有屏幕尺寸上运行，我在视口元标记中使用了 target-densitydpi=low-dpi，但我在三星 S4 设备上测试应用程序时发现了一个问题。问题是全屏图像虽然很高，但并没有以非常低的质量显示。

我用谷歌搜索了这个问题，发现为了让图像在三星 S4 上以相同的质量显示，我应该将 target-densitydpi=low-dpi 更改为 target-densitydpi=device-dpi，这解决了问题，但我发现我必须重新设计整个应用程序以支持所有屏幕尺寸。

我在问有没有办法使用 Javascript 动态更改目标密度 dpi，这样我可以在用户打开全屏图像时使其等于 device-dpi，然后在他关闭时将其返回到 low=dpi全屏图片？

我尝试使用 target-densitydpi=device-dpi 将图像放在单独的 html 文件中，并使用标签创建指向新 html 文件的链接，但转换速度太慢（大约需要 5 秒才能打开）。

有什么建议吗？

【问题讨论】：

标签： android cordova

【解决方案1】：

您可以在页面加载之前使用 JavaScript 创建视口。

以下知识库文章是如何执行此操作的示例（以支持 BlackBerry 10 智能手机）： http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/How-to-set-up-the-viewport-for-a-BlackBerry-WebWorks-application/ta-p/1943807

您可以扩展此示例以满足您的要求，如下所示：

<head>
    <script>
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    if (isS4) {
        meta.setAttribute('content','target-densitydpi=device-dpi');
    } else {
        meta.setAttribute('content','target-densitydpi=low-dpi');
    }
    document.getElementsByTagName('head')[0].appendChild(meta);
   </script>
</head>

【讨论】：

这段代码可以完成这项工作，但它必须放在onDeviceReady 事件中。