PhoneGap – 在视口上的target-densitydpi

我正在使用PhoneGap为Android和iOS创build一个应用程序。

从PhoneGap的模板创build“HelloWorld”应用程序后,默认情况下,可以在视口上看到target-densitydpi = device-dpi 。 好吧,现在没问题,但我决定使用JQuery Mobile UI运行一些testing,并且他们不在视口上使用target-densitydpi (顺便说一句,如果我这样做,网站在高dpi设备上应该看起来很小)。

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


首先, 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,所以我创build了一个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,所以我创build了一个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,所以我使用了以前创build的1080px图像,在GS4屏幕上看起来很棒。

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

图像测试

在第二次和第三次testing中,我能够得到相同的结果,但是,最好(或正确)的方式来使用PhoneGap应用程序?

谢谢!


EDIT1:

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

所有的testingwindow.width是1080px,所以返回正确大小的图像不会是一个问题。

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

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


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