PhoneGap - 视口上的target-densitydpi

Question

我正在使用PhoneGap为Android和iOS创建应用。

这的PhoneGap的模板创建的“HelloWorld”应用后，我可以通过默认看到在视口上的目标densitydpi =设备dpi的即可。好吧，这是罚款，但现在我决定运行一些测试与jQuery Mobile的用户界面和他们如果我不使用目标densitydpi 视口（顺便说一句，该网站看起来应该非常小的高dpi设备）。

由于我需要我的应用程序的图像在低分辨率和高分辨率设备上看起来很棒，我决定在我的Galaxy S4上运行一些测试。

---

首先， target-densitydpi = device-dpi已移除：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

document.width是360px，所以我创建了一个360px图像，在我的GS4屏幕上显得非常模糊。

<img src="360img.jpg" style="width:360px;">

---

其次， target-densitydpi =启用device-dpi ：

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

document.width是1080px，所以我创建了一个1080px图像，它在我的GS4屏幕上很棒。

<img src="1080img.jpg" style="width:1080px;">

---

第三， target-densitydpi =使用1080px图像删除device-dpi ：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

document.width是360px，所以我使用了之前创建的1080px图像，它在GS4屏幕上看起来很棒。

<img src="1080img.jpg" style="width:100%;">

---

我能够在第二次和第三次测试中获得相同的结果，但是，哪一种是使用PhoneGap应用程序的最佳（或正确）方式？

谢谢！

---

EDIT1：

我正在考虑通过API提供这些图像，我可以告诉窗口大小返回正确尺寸的图像。

在所有测试中，

window.width都是1080px，因此返回正确大小的图像不会有问题。

对于图标，我正在考虑SVG，然后我不需要为每个分辨率创建精灵。我可以通过CSS或JavaScript调整图像大小，它看起来仍然很好。

是什么让我觉得不使用target-densitydpi = device-dpi是JQuery Mobile UI，他们的库是响应式的，他们不使用它，为什么？

---

Answer 1

目标-densitydpi不支持IOS，不推荐使用Android。所以我建议不要使用它。