Web mobile: comment obtenir la taille de pixel physique?
Je suis entrain de créer une application web à l'aide de jQuery Mobile et PhoneGap. Il s'agit d'un graphique et si l'utilisateur est à l'aide d'un grand écran, je voudrais afficher plus de points sur ce graphique, car les points sont tappable et ne devrait pas être trop proche (physiquement).
Par exemple: si quelqu'un a un iPhone, je veux afficher le N points sur la ligne graphique. Si il a un iPad, je veux afficher 2xN points (à cause de l'iPad est physiquement plus grand écran), mais si il a quelques nouveaux téléphone Android qui est physiquement petit, comme un iPhone, mais dispose d'un écran avec un nombre de pixels (comme un iPad), je veux afficher les N points, parce que les points sont physiquement les petits (et les plus rapprochés).
Donc, il y a un moyen d'obtenir ces données? Une alternative est de déterminer si l'appareil est d'un comprimé.
source d'informationauteur duality_
Vous devez vous connecter pour publier un commentaire.
Ce que vous voulez est de vérifier la densité de pixels de l'appareil - mesurée en DPI - @Smamatti déjà mentionné à vous de le contrôler avec les CSS media queries.
Voici un article sur la façon de composer avec divers indicateur de performance, et de taille d'écran, à l'aide de ces CSS media queries.
Mise à JOUR: voici la fonction javascript (à partir du lien ci-dessus) qui utilise une astuce pour trouver le périphérique actuel DPI:
Espérons que cette aide!
Cette question est complexe.
Vous pouvez trouver la résolution de l'écran de votre appareil en JavaScript en utilisant l'écran.la largeur et l'écran.de la hauteur, tout comme vous le feriez sur un ordinateur de Bureau.
Cependant, sur un appareil mobile 1 CSS pixel ne sera pas nécessairement un rapport de 1 : 1 proportion avec un physique de pixel de l'écran. Disons que votre écran.largeur renvoie une valeur de 640 pixels. Si vous ajoutez une bannière qui est exactement à 640 pixels de large, il sera très probablement aller sur le disponible la largeur de l'écran de votre téléphone.
La raison en est que les fabricants de mobiles configurer l'appareil par défaut de la fenêtre d'affichage pour un facteur d'échelle différent de l'écran de votre appareil. C'est donc le contenu de pages web qui n'ont pas été conçus spécifiquement pour les appareils mobiles semble toujours lisible sans avoir besoin de pincer pour zoomer.
Si vous utilisez la balise meta "viewport", vous pouvez définir le facteur d'échelle de votre fenêtre à un ratio de 1 : 1, en définissant sa valeur de la largeur de l'appareil largeur de valeur, comme suit:
Maintenant que 640 pixels bannière serait parfaitement votre 640 pixels écran.
Malheureusement, en ce moment, autant que je sache, il n'y a pas de véritable moyen de savoir de la physique réel la taille de l'écran (en pouces ou en mm) de l'appareil affichage de votre contenu web. Au moins pas en JavaScript. Bien que le navigateur peut accéder à des informations utiles, comme le périphérique.nom ou de l'appareil.plate-forme, vous ne pouvez pas dire combien de pouces ou mm ceux 640 pixels représentent, sauf si vous savez à l'avance les mesures de l'écran de l'appareil.
Pour moi, il est assez évident pourquoi quelqu'un voudrait une version d'une application pour les petits écrans de téléphone, et un autre plus large de la tablette écrans. Petits boutons, par exemple. Parfois, ils sont tellement rapprochés que votre doigt permettrait de couvrir les deux à la fois. Dans le même temps, vous ne voulez pas de ces graisses boutons conçu pour les écrans montrant sur une belle tablette 10".
Vous pouvez bien sûr avec l'aide de l'écran.la largeur et la fenêtre.devicePixelRatio savoir si vous êtes en cours d'exécution, disons, sur un iPhone de la rétine ou d'un iPad 2, mais quand vous commencez compte tenu de la multitude de résolutions d'écran et les densités de pixels sur les appareils Android, la tâche devient presque impossible.
La solution est d'aller Natif.
Sur Android, vous pouvez utiliser le code sur le thread suivant pour déterminer si votre application est en cours d'exécution sur un grand écran:
Tablette ou Téléphone Android
Vous pouvez ensuite utiliser le code sur cet autre fil de requête de votre application de wrapper de JavaScript, en utilisant PhoneGap:
La Communication entre Android Java et de Phonegap?
Avec Apple, c'est encore plus simple:
Et si vous utilisez la même convention de nommage pour votre Android et Apple objets, votre code sera toujours universel, qui est le point de l'ensemble de PhoneGap. Par exemple, dans mon cas, j'ai utilisé le même nom pour les deux mon Java et mon Objectif-C, des objets et des méthodes. En JavaScript, j'ai juste besoin d'appeler:
Et mon code s'exécute et rend bien sur toutes les tailles d'écran.
regarder dans la fenêtre.devicePixelRatio
J'ai cherché partout et trouvé beaucoup de demi-solutions. Cela fonctionne sur android, iphone et sur le web. Dans votre CSS utiliser rem valeurs à l'échelle proportionnellement.
Mise à jour:
Je vais Maintenant utiliser quelque chose de plus proche de ce. Il fonctionne dans plus de cas. Ratio des modifications selon le projet, et de l'orientation. Et j'utilise une classe à la balise body qui va changer le CSS.