Obtenir les dimensions de l'écran physique / dpi / densité de pixels dans Chrome sur Android
Question
Existe-t-il un moyen sûr d'obtenir les dimensions physiques de l'écran réellement correctes dans Chrome, sous Android? Si nécessaire, les anciennes versions de Chrome et Android peuvent être ignorées).
Recherches antérieures
Il existe de nombreuses questions sans issue sur stackoverflow sur l'obtention des dimensions réelles de l'écran physique d'un périphérique à partir de javascript (ou css). Il semble qu'il n'y ait pas de convergence entre la normalisation hpml des API et les implémentations réelles des navigateurs, en ce sens que l'implémentation du navigateur repose sur des api OS qui à leur tour s'appuient sur un matériel fournissant les bonnes informations.
Certaines réponses préalables sont d'ailleurs obscures (année 2011 et autres) en supposant une certaine densité de pixels qui prévalait à cette époque, et donc inutile. D'autres se rapportent à webkit alors que Chrome, blink peut avoir remplacé webkit dans chrome (?).
Je voudrais explorer l’existence d’une solution simple en limitant les choses à Chrome sur Android.
Remarque
Il s’agit d’une solution javascript (ou css) dans le navigateur, et non d’une solution pour une application native.
Vous ne pouvez pas vraiment obtenir les dimensions physiques réelles ou le DPI réel et même si vous le pouviez, vous ne pouvez rien faire avec elles.
C'est une histoire assez longue et complexe, alors pardonnez-moi.
Le Web et tous les navigateurs définissent 1 px comme une unité appelée pixel CSS. Un pixel CSS n'est pas un pixel réel, mais plutôt une unité réputée être de 1/96ème de pouce en fonction de l'angle de vue du périphérique. Ceci est spécifié en tant que pixel de référence .
Le pixel de référence est l’angle visuel d’un pixel sur un appareil d’une densité de pixels de 96 ppp et à une distance d’un lecteur du bras. Pour une longueur de bras nominale de 28 pouces, l'angle visuel est donc d'environ 0,0213 degré. Pour une lecture à bout de bras, 1px correspond donc à environ 0,26 mm (1/96 de pouce).
Dans 0,26 mm d’espace, nous pourrions avoir de très nombreux pixels de périphériques réels.
Le navigateur le fait principalement pour des raisons traditionnelles (la plupart des moniteurs étaient à 96 ppp au moment de la création du Web), mais aussi par souci de cohérence: à l’époque, un bouton 22px sur un écran de 15 pouces à 800x600 était deux fois plus grand qu'un bouton 22px un moniteur de 15 pouces à 1600x1200. Dans ce cas, la résolution de l'écran est en fait 2x (deux fois la résolution horizontalement mais dans le même espace physique). La situation étant mauvaise pour le Web et les applications, la plupart des systèmes d’exploitation ont donc mis au point de nombreuses façons d’abstraire les valeurs de pixels dans des unités indépendantes du périphérique (DIPS sous Android, PT sur iOS et le CSS Pixel sur le système). Web ).
Le navigateur iPhone Safari a été le premier (à ma connaissance) à introduire le concept de fenêtre d'affichage. Ceci a été créé pour permettre aux applications de type bureau complet de s'afficher sur un petit écran. La fenêtre d'affichage a été définie comme ayant une largeur de 960 pixels. Cela a essentiellement agrandi la page 3x (l'iphone était à l'origine de 320 pixels), de sorte qu'un pixel CSS correspond à 1/3 d'un pixel physique. Lorsque vous avez défini une fenêtre, vous pouvez toutefois faire en sorte que cet appareil corresponde à 1 pixel CSS = 1 pixel réel à 163 dpi.
En utilisant une fenêtre dans laquelle la largeur est "device-width", vous n'avez plus à définir la largeur de la fenêtre par fenêtre à la taille optimale des pixels CSS. Le navigateur le fait pour vous.
Avec l'introduction des appareils à double DPI, les fabricants de téléphones mobiles ne voulaient pas que les pages mobiles paraissent être 50% plus petites. Ils ont donc introduit un concept appelé devicePixelRatio (d'abord sur mobile webkit, je crois), ce qui leur permet de conserver un pixel CSS d'environ 1/96e de pouce, mais laissez-vous comprendre que vos ressources, telles que les images, devront peut-être être deux fois plus grandes. Si vous regardez la série iPhone, tous leurs appareils indiquent la largeur de l’écran en les pixels CSS sont à 320 pixels même si nous savons que ce n’est pas vrai.
Par conséquent, si vous définissez un bouton sur 22 pixels dans l’espace CSS, la représentation sur l’écran physique correspond à 22 * rapport des pixels du périphérique. En fait, je le dis, ce n’est pas exactement cela, car le rapport de pixels de l’appareil n’est jamais exact non plus, les fabricants de téléphones l’ont réglé sur un nombre sympa comme 2.0, 3.0 plutôt que 2.1329857289918 ....
En résumé, les pixels CSS sont indépendants de l'appareil et nous n'avons pas à nous soucier de la taille physique des écrans et des densités d'affichage, etc.
La morale de l'histoire est la suivante: Ne vous inquiétez pas pour comprendre la taille physique des pixels de l'écran. Tu n'en as pas besoin. 50px devrait avoir à peu près le même aspect sur tous les appareils mobiles, mais il peut varier légèrement, mais CSS Pixel est notre moyen, indépendant de l'appareil, de créer des documents cohérents et des interfaces utilisateur.
Ressources:
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
- https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
- http://viewportsizes.com/
- http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
- http://en.wikipedia.org/wiki/Device_independent_pixel
- http://www.w3.org/TR/css3-values/#absolute-lengths
- https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Sur la base de la réponse de Matt, j'ai fait un test:
// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...
var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in
console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");
C'est la sortie:
The calculated diagonal of the screen is 35.37742738560738 inches.
Is that close to the actual value of 15.4?
Nan.
Il semble donc qu’il n’existe aucun moyen d’obtenir des valeurs physiques réelles dans un navigateur Web.
Vous pouvez créer n’importe quel élément de page et définir sa largeur en utilisant des unités physiques réelles. Par exemple
<div id="meter" style="width:10cm"></div>
Et puis obtenir sa largeur en pixels. Par exemple, le code HTML ci-dessous (j'ai utilisé JQuery) indique la largeur de l'écran de l'appareil en centimètres
<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;
alert(widthCM);
</script>
Vous pouvez obtenir cette information avec WURFL:
Propriétés d'affichage du périphérique
Les attributs s'appellent:
resolution_(width|height)
physical_display_(width|height)
Version longue:
La stratégie la meilleure et la plus dépendante pour y parvenir consiste à envoyer le user agent string du navigateur vers une base de données telle que WURFL (ou une autre), une base de données à jour pouvant fournir les informations nécessaires.
Il s'agit d'une information que tous les navigateurs modernes peuvent fournir. il expose des informations sur le périphérique et son système d'exploitation. Cela n'a tout simplement pas assez de signification pour votre application sans l'aide d'un dictionnaire comme WURFL.
Il s'agit d'une base de données couramment utilisée pour détecter les propriétés du périphérique.
Avec lui, vous pourrez peut-être supporter avec précision la plupart des appareils populaires sur le marché. Je posterais une démo de code mais celle-ci est disponible avec le téléchargement sur le site WURFL. Vous pouvez trouver une telle démonstration dans le dossier examples/demo téléchargé avec la bibliothèque.
Voici plus d'informations et d'explications sur la vérification de la taille physique et de la résolution: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286
En complément de la réponse "il n’ya pas de bonne solution à ce problème", il suffit de vérifier les unités que vous pouvez utiliser sur CSS https://www.w3schools.com/cssref/css_units.asp
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.
Avec cette description, il semble qu'il existe une solution. cm, mm et in seraient utilisés pour dessiner quelque chose avec la même taille indépendamment de la taille de l'écran et de la résolution. En gardant cela à l'esprit, vous pouvez vous attendre à ce qu'au moins un de px, pt ou pc puisse être utilisé pour dessiner au niveau du pixel, quelle que soit la précision souhaitée. utiliser (sinon, à quoi ça sert d'avoir des millions de pixels, non?). Et bien non. Toutes les unités sont des fractions d'une unité métrique, rendant toutes ces unités simplement des échelles différentes. Et le pire dans cette histoire est le fait qu’aucune d’entre elles n’est exacte. Jouez simplement avec l'exemple w3schools (tracez une ligne de 20 cm et mesurez-la avec une règle).
Donc à la fin: - il n’ya aucun moyen de dessiner avec précision des dimensions physiques (ce qui devrait être le cas avec cm, mm, in et éventuellement pt et pc). - il n'y a aucun moyen de dessiner quelque chose avec la même taille indépendamment de la taille de l'écran et de la résolution (ce qui devrait être le cas avec au moins px).
Il s’agit à la fois d’un problème d’implémentation (la taille réelle de l’écran n’est pas utilisée) et d’un problème de conception (pourquoi px devrait-il être indépendant de la taille de l’écran alors qu’il existe déjà autant d’unités pour cela).
J'ai abordé ce problème avec l'un de mes projets Web http://www.vinodiscover.com La réponse est que vous ne pouvez pas savoir avec certitude quelle est la taille physique, mais vous pouvez obtenir une approximation. En utilisant JS et/ou CSS, vous pouvez trouver la largeur et la hauteur de la fenêtre d'affichage/écran et la densité de pixels à l'aide de requêtes multimédia. Par exemple: iPhone 5 (326 ppp) = 320px par 568px et une densité de 2,0 pixels, tandis qu'un Samsung Galaxy S4 (441ppi) = 360px x 640px et une densité de 3,0 pixels. Effectivement, une densité de 1,0 pixel est d'environ 150 ppp.
Compte tenu de cela, je règle mon CSS pour afficher 1 colonne lorsque la largeur est inférieure à 284 px, quelle que soit la densité de pixels; puis deux colonnes entre 284px et 568px; puis 3 colonnes au-dessus de 852px. C'est beaucoup plus simple qu'il n'y paraît, puisque les navigateurs effectuent maintenant les calculs de densité de pixels automatiquement.
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Les pixels CSS ne sont pas vraiment notre "pixel indépendant du périphérique". La plate-forme Web consiste en une variété de types d'appareils. Bien que les pixels CSS paraissent assez cohérents sur les ordinateurs de poche, ils seront 50% plus gros sur un moniteur de bureau typique à 96 ppp. Voir mon question . Ce n'est vraiment pas une mauvaise chose dans certains cas, par exemple. les polices doivent être plus grandes sur un écran plus grand, car la distance à l'œil est plus grande. Mais les dimensions des éléments d'interface utilisateur devraient être assez cohérentes. Supposons que votre application ait une barre supérieure, vous préféreriez qu'elle soit de la même épaisseur sur les ordinateurs de bureau et les mobiles. Par défaut, elle sera 50% plus petite, ce qui n'est pas bon, car les éléments tactiles doivent être plus volumineux. La seule solution de contournement que j'ai trouvée consiste à appliquer différents styles en fonction du DPI du périphérique.
Vous pouvez obtenir un DPI d'écran en JavaScript avec window.devicePixelRatio. Ou requête CSS:
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
/* specific styles for handhelds/ high dpi monitors*/
}
Je ne sais pas comment appliquer cela fonctionnerait sur un moniteur de bureau à haute résolution cependant. Peut-être que les éléments seraient trop petits. Il est vraiment dommage que la plate-forme Web n'offre rien de mieux. Je suppose que la mise en œuvre de dip ne serait pas trop difficile.
A l'aide de la fonction getPPI () ( Web mobile: comment obtenir une taille de pixel physique? ), utilisez la formule suivante pour obtenir un identifiant d'un pouce
var ppi = getPPI();
var x = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);
<div id="Cubo" style="background-color:red;"></div>
J'ai remarqué dans vos commentaires que vous étiez préoccupé par la taille des boutons, etc., apparaissent au spectateur.
J'avais le même problème, jusqu'à ce que je découvre qu'il suffisait d'ajouter une balise méta à l'en-tête HTML pour définir l'échelle initiale:
<meta name="viewport" content="width=device-width, initial-scale=1">
En réponse à la réponse de zehelvion sur l'utilisation de WURFL pour trouver la résolution, il convient également de mentionner que WURFL est également disponible au format extrait de code JavaScript .
Dans l'édition gratuite proposée à l'adresse wurfl.io , vous n'obtiendrez pas d'informations sur l'écran et la résolution (uniquement le nom de l'appareil, le facteur de forme et mobile/non mobile), mais il existe également une version commerciale. avec plus de fonctionnalités disponibles ici .
largeur d'élément JqueryMobile
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
JqueryMobile Hauteur de l'élément
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
Bonne chance Danny117