PhoneGap的 - 对视目标densitydpi [英] PhoneGap - target-densitydpi on viewport

查看:145
本文介绍了PhoneGap的 - 对视目标densitydpi的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我创建了Android和iOS的PhoneGap使用一个应用程序。

I'm creating a app for Android and iOS using PhoneGap.

这是PhoneGap的的模板创建的HelloWorld应用程序后,我可以看到目标densitydpi =设备dpi的视口默认。好吧,这很好的,但现在我决定运行使用jQuery Mobile UI的一些测试,他们的不要在视口中使用目标densitydpi (顺便说一句,如果我这样做,该网站看起来应该非常小的高DPI设备)。

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).

因为我需要我的应用程序的图片很好看在低分辨率和高分辨率的设备,我决定在我的Galaxy S4运行一些测试。

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.

首先,目标densitydpi =设备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屏幕。

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;">


其次,目标densitydpi =设备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屏幕。

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;">


三,目标densitydpi =设备-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,所以我用了previously创建1080px图像并在GS4屏幕看起来很大。

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%;">



我能获得第二和第三个测试相同的结果,但是,至极一种是与PhoneGap的应用程序最好的工作(或正确)的方式?

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?

谢谢!

EDIT1:

我想通过API,在这里我可以告诉窗口的大小,以返回正确的尺寸图像提供了这些图像。

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是1080px在所有的测试,所以返回正确的尺寸图像不会是一个问题。

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

有关的图标,我考虑的SVG,那么我并不需要创建精灵每一项决议。我可以通过CSS或JavaScript调整日的形象和它应该仍然看起来很不错。

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.

是什么让我觉得不使用目标densitydpi =设备DPI是jQuery Mobile的用户界面,他们图书馆响应,他们不使用它,为什么?

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?

推荐答案

目标densitydpi不支持IOS和德precated的Andr​​oid。因此,我建议不使用它。

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆