我正在使用 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 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 是 1080 像素,所以我创建了一个 1080 像素的图像,它在我的 GS4 屏幕上很棒。
<img src="1080img.jpg" style="width:1080px;">
第三,使用 1080px 图像删除 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,所以我使用了之前创建的 1080px 图像,它在 GS4 屏幕上看起来很棒。
<img src="1080img.jpg" style="width:100%;">
我能够在第二次和第三次测试中获得相同的结果,但是,哪一种是使用 PhoneGap 应用程序的最佳(或正确)方法?
谢谢!
编辑1:
我正在考虑通过 API 提供这些图像,在那里我可以告诉窗口的大小以返回正确大小的图像。
window.width 在所有测试中都是 1080px,因此返回正确大小的图像不会有问题。
对于图标,我正在考虑使用 SVG,然后我不需要为每个分辨率创建精灵。我可以通过 CSS 或 JavaScript 调整图像大小,它应该仍然看起来不错。
是什么让我认为不使用 target-densitydpi=device-dpi 是 JQuery Mobile UI,他们的库是响应式的,他们不使用它,为什么?