PhoneGap - target-densitydpi在视口 [英] PhoneGap - target-densitydpi on viewport

问题描述

我正在使用PhoneGap为Android和iOS创建应用程序。

从PhoneGap的模板创建HelloWorld应用程序后， densitydpi = device-dpi默认情况下在视口上。好吧，这是很好，现在，但我决定运行一些测试与JQuery Mobile UI，他们不使用target-densitydpi 在视口（顺便说一句，如果我这样做，网站应该看起来很小高dpi设备）。

由于我需要我的应用程序的图像看起来不错的低和高分辨率的设备，我决定在我的Galaxy S4上运行一些测试。 / p>

---

首先， target-densitydpi = device-dpi removed ：

 < meta name =viewportcontent =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.jpgstyle =width：360px;> 
  
 
 
 
 
 
 
其次， target-densitydpi = device -dpi enabled ：：
 < meta name =viewportcontent =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.jpgstyle =width：1080px;& 
  
 
 
 
 
 
 
第三， target-densitydpi = -dpi remove with 1080px image ：
 < meta name =viewportcontent =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.jpgstyle =width：100％;> 
  
 
 
 
 
 
 
  
 
 
 
我可以在第二次和第三次测试中得到相同的结果，但是，一个是使用PhoneGap应用程序的最好的（或正确的）方式？
 
 
 
谢谢！
 
 
 
 
 
 
  EDIT1： 
 
 
 
我想通过API提供这些图片，窗口返回正确大小的图片。
 
 
 
 window.width在所有测试中为1080px，因此返回正确大小的图片不会有问题。
 
 
 
对于图标，我考虑SVG，那么我不需要为每个分辨率创建精灵。我可以通过CSS或JavaScript调整图像大小，它应该仍然看起来不错。
 
 
 
什么让我想不使用target-densitydpi = device-dpi是JQuery Mobile 
 
 
 
 
 
解决方案
 p> target-densitydpi不支持IOS和弃用的Android。所以我建议不要使用它。
 
I'm creating a app for Android and iOS using PhoneGap.

After creating the "HelloWorld" app from PhoneGap's template I could see the target-densitydpi=device-dpi on the viewport by default. Okay, that's fine for now but I decided to run some tests with JQuery Mobile UI and they do not use target-densitydpi on the viewport (by the way if I do, the website should look very small on high dpi devices).

Since I need the images of my app to look great at low and high resolution devices, I decided to run some tests on my Galaxy S4.



First, target-densitydpi=device-dpi removed:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
The document.width was 360px, so I created a 360px image and it was really blurry at my GS4 screen.
<img src="360img.jpg" style="width:360px;">




Second, 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" />
The document.width was 1080px, so I created a 1080px image and it was great at my GS4 screen.
<img src="1080img.jpg" style="width:1080px;">




Third, 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" />
The document.width was 360px, so I used the previously created 1080px image and it looks great at the GS4 screen.
<img src="1080img.jpg" style="width:100%;">






I was able to get the same results on second and third tests, but, wich one is the best (or correct) way to work with PhoneGap Apps?

Thanks!



EDIT1:

I'm thinking about provide these images via API, where I can tell the size of the window to return the correct sized image.

window.width was 1080px at all tests, so return the correct sized image will not be a problem.

For icons, I'm considering SVG, then I don't need to create sprites for each resolution. I can resize de image via CSS or JavaScript and it should still looking good.

What made me think to don't use target-densitydpi=device-dpi was JQuery Mobile UI, they library is responsive and they don't use it, why?


解决方案
target-densitydpi is not supported IOS and deprecated Android. So I suggest do not use it.

                        
这篇关于PhoneGap  -  target-densitydpi在视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！