PhoneGap - cible-densitydpi sur la fenêtre d'affichage
Je suis de la création d'une application pour Android et iOS à l'aide de PhoneGap.
Après la création de la "HelloWorld" application à partir de PhoneGap du modèle, je pouvais voir le cible-densitydpi=device-dpi sur la fenêtre d'affichage par défaut. Ok, c'est bien pour le moment mais j'ai décidé de faire quelques tests avec JQuery Mobile de l'INTERFACE utilisateur et ils ne pas utiliser la cible densitydpi sur la fenêtre d'affichage (en passant, si je le fais, le site internet doit être très petit à haute résolution des appareils).
Depuis que j'ai besoin des images de mon appli pour regarder grand à la basse et à haute résolution des appareils, j'ai décidé de faire quelques tests sur mon Galaxy S4.
D'abord, cible-densitydpi=device-ppp retiré:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />Le document.la largeur a été 360px, j'ai donc créé un 360px image et c'était vraiment flou à mon GS4 écran.
<img src="360img.jpg" style="width:360px;">Deuxième, cible-densitydpi=device-ppp activé:
<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" />Le document.la largeur a été 1080px, j'ai donc créé un 1080px de l'image, et c'était génial à mon GS4 écran.
<img src="1080img.jpg" style="width:1080px;">Troisième, cible-densitydpi=device-ppp supprimé avec 1080px image:
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />Le document.la largeur a été 360px, j'ai donc utilisé précédemment créé 1080px de l'image et il ressemble beaucoup au GS4 écran.
<img src="1080img.jpg" style="width:100%;">
J'ai été en mesure d'obtenir les mêmes résultats sur les deuxième et troisième essais, mais, ce qui est le meilleur (ou corriger) de façon à travailler avec PhoneGap Apps?
Merci!
EDIT1:
Je suis en train de réfléchir fournir ces images via l'API, où je peux la taille de la fenêtre pour retourner la bonne taille de l'image.
fenêtre.la largeur a été 1080px à tous les tests, afin de renvoyer la bonne taille de l'image ne sera pas un problème.
Pour les icônes, je suis en train d'étudier SVG, alors je n'ai pas besoin de créer des sprites pour chaque résolution. Je peux redimensionnement de l'image via CSS ou JavaScript et il est toujours à la recherche de bonnes.
Ce qui m'a fait penser à ne pas utiliser la cible densitydpi=device-dpi a été JQuery Mobile de l'INTERFACE utilisateur, ils bibliothèque est réactif et ils ne l'utilisent pas, pourquoi?
mauvais mauvais mauvais. Dans le troisième cas, le navigateur mobile est en train de convertir tous les css pixels par un facteur de 3. La résolution du téléphone est encore 1080 pixels de large, mais les 1080 / 3 est 360. Il n'y a aucun gaspillage de pixels autant que l'image est concerné. Un pixel n'est pas un pixel de plus dans le monde du mobile. quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
OriginalL'auteur Wyller Gomes | 2013-09-03
Vous devez vous connecter pour publier un commentaire.
cible-densitydpi n'est pas pris en charge IOS et obsolètes Android. Je suggère donc de ne pas l'utiliser.
Quelle version? Je crois webview de kitkat devrait pas en charge la cible densitydpi. ( developer.android.com/guide/webapps/migrating.html )
Oh désolé, je suis encore sur Jelly Bean.
Android 4.4 ignore totalement cet attribut. De toute façon, forçant l'utilisation de l'appareil dpi crée plus de problèmes qu'elle n'en résout (votre mise en page qui semble bon sur 320x480 sera ridiculement petit sur les téléphones avec +de 300 dpi)
OriginalL'auteur dongseok0