1448 sujets

Web Mobile et responsive web design

Bonjour,

La dimension physique de mon doigt ne s'adaptant pas au PPI des terminaux tactiles... Smiley lol ,
J'ai besoin que les surfaces dessinées sur un canvas aient (à peu de chose près) la même dimension physique (apparente) quel que soit le PPI du terminal tactile.

J'ai considéré plusieurs options :

A/ Jouer avec le viewport avec un width fixé.
Partant du principe que les tablettes ont sensiblement toutes les mêmes dimensions physiques, on va dire pour simplifier les calculs 10", que le plus faible PPI vaut 100 => je fixe mon canvas à 1000px et je déclare un viewport avec un width=1000.

Bon... le résultat n'est pas trop mal sur la tablette (bas de gamme) que je possède mais je me suis laissé dire que certains navigateurs (Fennec?) / tablettes ne zoomaient pas lorsque width < device-width.
Bon... le principal inconvénient de cette tactique reste pour ceux qui ont des dimensions physiques d'écrans > 10"

B/ Jouer avec la méthode scale() de l'objet canvas.
Partant du principe que je ne sais pas récupérer le PPI des terminaux et que, suivant le tuto de raphaël sur le viewport, les terminaux... "me mentent" sur leurs définitions... Smiley bawling :
Je détermine un <div> bidon à 100%, récupère sa taille en px avec clientWidth et lance scale() avec le rapport entre le clientWidth et la taille (fixe) en px du canvas.
Bon... je ne sais pas si cela marchera avec tous les navigateurs/tablettes... (il fut un temps ou clientWidth n'était pas standard... je ne sais pas si cela a changé.)

C/ Je laisse l'utilisateur se dépatouiller avec son zoom.
L'inconvénient majeur de cette stratégie est que il va nécessairement chercher à zoomer suivant la gesture convenue... or... mon canvas prevent-defaults et gère ses propres gestures.
Alors... mettre un bouton de zoom ? Bon...pas terrible... cela prend de la place sur l'écran et disparaitra quand je passe le canvas en fullscreen...

Donc voilà... merci d'abord d'avoir lu. Smiley smile
Si maintenant vous avez une recco... une autre idée... Smiley loveu
Modifié par aCOSwt (08 Feb 2017 - 10:04)