PhoneGap - 视口上的目标密度 dpi

Posted 2023-05-06

【中文标题】PhoneGap - 视口上的目标密度 dpi

【英文标题】：PhoneGap - target-densitydpi on viewport

【发布时间】：2013-09-06 20:53:56

【问题描述】：

我正在使用 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，他们的库是响应式的，他们不使用它，为什么？

---

【问题讨论】：

如果您使用 device-dpi 会更好，因为对于第三种情况，您需要更少的像素，但是您使用的图像尺寸超过了必要的尺寸，这最终会增加应用程序的大小，这不是我们想要的功能。

错错错。在第三种情况下，移动浏览器将所有 css 像素转换为 3 倍。手机的分辨率仍然是 1080 像素宽，但 1080 / 3 是 360。就图像而言，没有浪费像素。在移动世界中，像素不再是像素。 quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

【参考方案1】：

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

【讨论】：

我在 2014 年初刚买了一部新的 android 手机，target-densitydpi 仍在发挥作用。

哪个版本？我相信来自 kitkat 的 webview 不应该支持 target-densitydpi。 (developer.android.com/guide/webapps/migrating.html)

抱歉，我还在吃果冻豆。

Android 4.4 完全忽略了该属性。无论如何，强制使用设备的 dpi 会产生比它解决的问题更多的问题（在 320x480 上看起来不错的布局在 +300 dpi 的手机上会小得离谱）