Question

我正在使用Phonegap开发一个Android应用程序。我在320px * 480px视口尺寸上完成了它的开发。为了使应用程序能够在所有屏幕尺寸上工作，我在viewport metatag中使用了target-densitydpi = low-dpi，但我在Samsung S4设备上测试应用程序时遇到了问题。问题是全屏图像虽然很高，但显示质量很差。

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

我问有没有办法使用Javascript动态更改target-densitydpi所以我可以在用户打开全屏图像时使其等于device-dpi然后在关闭时将其返回到low = dpi全屏图像？

我尝试将图像放在一个带有target-densitydpi = device-dpi的单独的html文件中，并使用标记创建一个链接到新的html文件，但过渡太慢（打开大约需要5秒）。

有什么建议吗？

Answer 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>

如何动态更改Phonegap Android app target-densitydpi？

1 个答案: