android - PhoneGap - 视口(viewport)上的目标密度 dpi

Question

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

从 PhoneGap 的模板创建“HelloWorld”应用程序后，我可以在默认情况下在视口(viewport)上看到target-densitydpi=device-dpi。好的，现在没问题，但我决定用 JQuery Mobile UI 运行一些测试，它们不在视口(viewport)上使用 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 enabled:

<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 removed with 1080px image:

<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 Apps 的最佳(或正确)方法是什么？

谢谢!

---

编辑 1:

我正在考虑通过 API 提供这些图像，我可以在其中确定窗口的大小以返回正确大小的图像。

window.width 在所有测试中都是 1080px，所以返回正确尺寸的图像不会有问题。

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

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

---

Answer 1

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