PhoneGap - 视口上的目标密度 dpi

Question

我正在使用 PhoneGap 创建适用于 Android 和 iOS 的应用。

从 PhoneGap 的模板创建“HelloWorld”应用程序后，我可以在默认情况下在视口上看到 target-densitydpi=device-dpi。好的，现在这很好，但我决定使用 JQuery Mobile UI 运行一些测试，它们不在视口上使用 target-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=device-dpi 移除 1080px 图片：

<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 在所有测试中都是 1080 像素，因此返回正确大小的图像不会有问题。

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

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

---

Answer 1

target-densitydpi 不支持 IOS 和已弃用的 Android。所以我建议不要使用它。