Au secours ! je m'en sors plus !, taille logique et taille physique des écrans haute def !

[No6]

Depuis l’arrivée des Retina et autre écrans à haute définition, c’est un peu le flou en matiere de développement…

Par exemple, j’utilise modestement un Xperia M, dont la dalle est « physiquement » en 854 x 480 pixels,
Mais en réalité de 448 x 320 pixels en défintion « logique ».

Pour mémo, actuellement, pour un MacBookPro 15" la definition physique est de 2 880 x 1 800 pixels à 220 pixels par pouce
Et on peut ensuite choisir parmis les definitions « logiques » :
1 920 x 1 200, 1 680 x 1 050, 1 280 x 800 et 1 024 x 640 pixels.

Ma question c’est : comment on fait, avec jQuery ou autre truc pour un site internet pour connaitre la définition Physique de l’écran utilisé par un internaute ???

Parce que d’est un peu le bordel pour la gestion des bas de page, si je met un body en height :100%, il se base sur la dimension logique.

Ca qui est pénible, surtout quand je met sur ce même Body un min-with à 480px, et qu’automatiquement il les réduit en sur la largeur disponible et que du coup je me retrouve avec un fond d’écran inutilisé.

Comme je ne peux pas connaitre la hauteur résultant d’une mise à l’echelle automatique, je m’en sort pas !

Soit je met un « height trop grand, et à ce moment la, je me retrouve avec un ascenseur à droite, soit l’espace est perdu.

Bref, c’est le bordel ,et comment que je fais ?

Ce message a été modifié par No6 - 26 Feb 2015, 19:09.

[yponomeute]

Salut,

Code

$(window).width();
$(window).height();

ça ne te renvoies pas la bonne dimension en pixels "logiques" ?

Edit : ça va pas t'aider, en fait tu cherches à connaitre la dimension physique si j'ai bien compris.

Ce message a été modifié par yponomeute - 26 Feb 2015, 21:03.

[No6]

vi, ça me renvoie les dimensions logiques, et pas les physiques...

a la limite j'ai le ratio hauteur / largeur par le rectangle d'affichage "Logique", qui me permet d'extrapoler sur les "dimensions" physiques, il me faudrait juste trouver au moins un moyen de trouver l'une des 2 vraies dimensions "physiques", mais la je ne suis pas forcement certain que ce ratio soit respecté...

même si sur l'écran rétina du MacBookPro 15" le ratio de 1.6 est le même sur toutes les définitions logiques et physiques...

L'autre partie du problème reste à connaitre le hauteur d'écran utilisée par l'interface du browser pour indiquer l'url, et autres trucs; ça dvient un sac de noeuds...

Je me rabats sur l'utilisation du ratio pour la hauteur restante proportionnellement, entre autres pour avoir un background "propre", mais je suis pas vraiment convaincu de mon bricolage, ni certain que la remise en échelle automatique faite par les browsers puisse donner de bons résultats.

Ce qui m'étonne c'est cette impression d'être le seul à me poser cette question, et du pourquoi le css body { height:100%; } soit si mal calculé quand la largeur déborde !

Ce message a été modifié par No6 - 27 Feb 2015, 00:20.

[macpacher]

J'ai trouvé ça :

window.devicePixelRatio

ici http://www.hongkiat.com/blog/css-retina-display/
sinon les medias queries ?...

Ce message a été modifié par macpacher - 20 Mar 2015, 22:58.

[No6]

Merci,...
je en connaissais pas devicePixelRatio.

Sinon, oui, je me suis rabattu sur un minimum de media queries...

[macpacher]

Suite ...

Les attributs suivants de l'objet window renseigne la taille utile de la fenêtre et la position par rapport au coin de l'écran (voir copie d'écran)
innerHeight (sans les barres de menu du navigateur)
innerWidth (inclus le scrollbar !)
outerHeight (inclus les barres de menu du navigateur)
outerWidth
screenLeft
screenTop
screenX
screenY
 tailles_fenetres.jpg ( 124.84 Ko ) Nombre de téléchargements : 3


La resolution de l'écran est donnée par
window.screen.width
window.screen.height

Reference : http://www.w3schools.com/jsref/obj_window.asp qui ne mentionne pas devicePixelRatio cité précédemment ?!

l'objet screen donne aussi la resolution de l'écran (reconnu par la plupart des navigateurs)
screen.width
screen.height

Reference : http://www.w3schools.com/js/js_window_screen.asp

Je n'ai pas d'écran retina, donc tous mes essais donnent des dimensions physiques et devicePixelRatio=1.
Si cela te permet d'avancer...

[No6]

Je n'ai pas d'écran retina, donc tous mes essais donnent des dimensions physiques logiques /...

Moi, ce que justement j'aimerai connaitre, c'est les vraies valeurs de la définition physique des écrans.
La valeur du devicePixelRatio répond partiellement à cette question, et elle me semble imprécise

Pour reprendre le cas l'écran rétina du MacBookPro 15" (2 880 x 1 800)

Logiquement on devrait retrouver suivant la définition choisie :

1 920 x 1 200 => devicePixelRatio = 1,5
1 680 x 1 050 => devicePixelRatio = 1,714285714 --> je me demande si cette précision sera au rendez vous... ?
1 280 x 800 => devicePixelRatio = 2,25
1 024 x 640 => devicePixelRatio = 2,8125

[macpacher]

Il faut lancer un appel aux macbidouilleurx rétinesques pour qu'ils exécutent sur leur machine le code ci dessous

Modif : en fait j'ai testé sur mon écran en modifiant la résolution (1600x900 au lieu de 1920 x 1080 native)
devicePixelRatio reste à 1
et screen.width x screen.height passe à 1600x900.
Donc le navigateur n'a accès qu'aux dimensions logiques ...


Ce message a été modifié par macpacher - 21 Mar 2015, 20:36.

[yponomeute]

devicePixelRatio = 2 sur un retina, quel que soit la résolution.