Discussion :

[BOU59000]

Bonjour à toutes et à tous,

Grâce aux media querie, il est possible d'adapter l'affichage suivant le nombre de pixel qui contient le support de lecture.
Les media querie fonctionnent avec un nombre de pixel:
Si inf à 576px alors
Si inf à 768px alors
...

La résolution des téléphones est de plus en plus impressionnante.
Du coup certains téléphones affichent un design "ordinateur" alors que l'on a créé un design "smartphone".

Question:
Est-il possible d'avoir une déclenchement qui se fait sur autre chose que le nombre de pixel?
Peut-on savoir si le support de lecture est un ordinateur/ tablette/ téléphone autrement que par les pixels?

Pour le moment je règle média querie avec une bascule à 1140px pour être certain que l'affichage smartphone s'affiche sur les smartphones avec écran super résolution...
Ce qui est un niveau de bascule très "élevé"

Si vous avez des pistes je suis preneur.

D'avance merci

[Doksuri]

comme tu l'as dis, les tailles sont tellement enormes que le support ne fait plus sens ... pourquoi vouloir detecter ordi/tablette/mobile du coup ?

une autre approche qui pourrai t'aider, est de detecter le touch (pour les events) est-ce qu'il faut "cliquer", ou "toucher"

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

const isTouch = window.matchMedia('(pointer:coarse)') && window.matchMedia('(pointer:coarse)').matches;

autre idee (qui est plus dans ta problematique je pense), tester le navigator.userAgentData : c'est une "mise a jour" du navigator.userAgent
=> tu y trouveras notament un bool : mobile .... navigator.userAgentData.mobile=> malheureusement, ce n'est pas pleinement compatible avec tous les navigateurs developer.mozilla.org/en-US/docs/Web/API/Navigator/userAgentData

[NoSmoking]

Bonjour,
concernant les « screen sizes - viewport sizes », tu as l’embarras du choix :
• Smartphones and tablets and monitors, oh my.

Tu peux toujours aussi te faire une idée de ce qu'utilise BootStrap :
• [BootStrap] Media queries

[BOU59000]

Bonjour,

Tout d'abord merci pour vos réponses

Pourquoi vouloir détecter le support:

Le soucis que je constate avec media querie est que l'on se base seulement sur le nombre de px pour effectuer les breaks.
Un petit écran avec un nombre de pixel/cm impressionnant passera en vue "ordinateur" de part son nombre de px, mais son côté "petit écran" n'en rendra pas pour autant la lecture confortable.

Je teste le site que je crée sur mon portable pour la vue smartphone.
Un xiaomi quelque chose ().
Et si je souhaite avoir la vision smartphone je dois taper au dessus de 1080p. Sinon je suis en vue "ordinateur".
C'est lisible mais pas très confortable (caractères minuscules du coup...)
Je recherche du coup ce côté "confort de lecture" suivant les différents supports.
Et si cela peut se détecter automatiquement (comme avec media queries, autant en profiter )

Question:
J'ai vu que le site développez "détecte" que je suis en lecture smartphone.
Ce qui rend la lecture vraiment confortable
Je ne suis pas certain (à tord peut-être) que cette détection se fasse seulement avec media querie (ou alors cela voudrait dire que le break se situe au dessus de 1080p et que l'on miserait sur des utilisateurs qui n'ont pas d'écran d'ordi inf à 1K ).
Du coup, je me disais qu'il devait avoir une méthode complémentaire ou plus poussée que les media querie.

Je ne connais pas le JSS (encore beaucoup de choses à apprendre ).
L'idée semble sympa en effet de détecter la manière dont l’interaction se fait sur l'écran.
Est-il possible de mixter les deux (media querie + JSS)?
Car media querie est dans une feuille CSS et JSS dans une autre, du coup j'ai un peu de mal à voir la connexion.
(Désole je fonctionne beaucoup en logique If... Else encore )
Si nombre de pixel sup à 1080px
Si tu touches ton écran avec ton doigt (ou autre)
Alors code JSS et j'envoie le code CSS en mode smartphone
Sinon
Ne fais rien, l'utilisateur est tout confort de lecture

D'avance merci

[Doksuri]

c'est quoi "JSS" ?

sinon, pour la taille de la police (lisibilite) tu peux passer par les rem/em plutot que des tailles en px... developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Values_and_units

[BOU59000]

Excuse moi, j'utilise souvent JSS pour dire javascript (JS il me semble si je reprends l'extension des scripts )

Effectivement, j'utilise les tailles en em plutôt qu'en px.
Je suis parti sur ce qui était le plus modulable possible vu le nombre impressionnant de support/ qualité support existants

[jreaux62]

lol...

1- Et pourquoi pas JJSS * tant qu'on y est ?

(* : et c'est là qu'on voit que je suis un vieux...)

2- voir / à tester (à voir si c'est encore à jour) :

• Mobile_Detect (PHP)

[BOU59000]

JJSS... Je savais bien qu'il y avait une origine à ma dérive du JS qui se transformait en JSS pour aller vers le JJSS
(Bon j'aurai appris ce jour l'existence de JJSS )

Merci je creuse le "Mobile detect"