[Calcul] Même ratio pr différent résolution

Sujet résolu

23 août 2017 à 15:10:44

Bonjour à tous ,

Je suis UX designer, pour un projet au boulot, on me demande de designer des éléments d'un site web version desktop et de le passer sur une tablette. Le tout en conservant le même ratio des éléments.

Les éléments originaux sont sur un desktop 17" d'une résolution de 1280 x 1024 px et la tablette cible fait 10"1 pour une résolution de 1920 x 1200 px. Je sais que la notion de résolution et de définition rentre en compte pour conserver le même ratio.

D'autre part, la définition écran du desktop = 96 ppi et celle de la tablette= 224 ppi. Donc la tablette est plus HD que le desktop. Si je garde les mêmes dimensions, cela va apparaitre plus petit sur tablette !

Je voulais donc savoir quel calcul je dois faire pour que les dimensions de mes éléments garde le même ratio sur ma tablette.
C'est à dire pour un bouton qui fait 150 x 40 px sur desktop combien de pixel il mesurera sur tablette ? (pour avoir un même rendu que sur desktop).

J'espère que mes explications sont bien clairs.

Et je vous remercie par avance pour votre aide

-
Edité par Hinata1703 il y a environ 20 heures

tabouretBleu

23 août 2017 à 21:19:15

Un ratio c'est une division et tu ne dis pas ce que tu divises. Heureusement, avec le contexte on comprend ce que tu veux mais il faudrait être plus clair. Utilise tes propres mots quand tu as un doute.

Il n'y a aucun moyen standard de donner à un élément les mêmes dimensions physiques quel que soit l'écran qui l'affiche en HTML/CSS. Des tablettes et des écrans aux résolutions différentes, il y en a des terachiées. En général les gens se contentent d'une approximation en jouant avec la balise meta viewport pour donner une dimension fictive à la fenêtre et attribuer un facteur de grandissement, ce qui ne règle rien au problème de diversité des écrans mais ça permet, comme ce que tu veux faire, de se caler sur UN device précis et UNIQUEMENT celui-là, ce qui est d'une débilité innommable mais la seule autre solution serait de passer par Javascript et c'est trop différent du flux de travail basique des intégrateurs.

Maintenant, si tu veux calculer les dimensions en pixels d'une image à des résolutions différentes, c'est tout bête : 224/96 donne le coefficient multiplicateur que tu dois appliquer à tes dimensions. Note quand même que ce serait ridicule de créer des images spécifiquement pour chaque résolution différente. Il vaut mieux utiliser le format SVG quand c'est possible. Quant aux photos, pense aussi à ceux qui ont un écran 4K : il n'y a pas que les tablettes qui ont une grande résolution.

-
Edité par tabouretBleu 23 août 2017 à 21:25:44

Hinata1703

24 août 2017 à 16:27:05

Donc si j'ai bien compris 224/96=2.3.

Pour un bouton de 150 x 40 px. Il fera 150 x 2.3 = 345 et 40 x 2.3=92 sur tablette. C'est bien ça ?

Parce que lorsque je l’implémente sur la tablette le rendu est vraiment 2 fois plus gros de ce que je veux.

tabouretBleu

24 août 2017 à 16:51:26

J'ai parlé de la balise meta viewport et de dimension fictive de la fenêtre. En toute logique, les dimensions de tes éléments HTML vont s'exprimer en fonction des dimensions du viewport : si ton bouton fait 300px de large et que tu définis un viewport de 300px de large, le bouton prendra 100% de la largeur de la page, même si en vrai l'écran affiche des milliers de pixels en largeur. Le résultat c'est un bouton énorme. C'est à toi de définir en CSS des dimensions qui ont du sens par rapport aux dimensions du viewport.

Je sais que c'est pas évident et que tu aurais préféré une solution en centimètres qui fait la conversion toute seule mais malheureusement ça ne marche pas comme ça.