Tablette
Tailles tactiles
La règle
Sur la tablette en rayon, poser data-density="touch" sur <html> au lancement (ou auto pour une application ouverte aussi sur poste, voir Plateformes) : 17 px de texte, contrôles de 48 px, lignes de 56 px, icônes de 24 px, cases et radios de 28 px, interrupteur de 52 px, touches de pavé de 64 px. Rien d'autre à faire : tous les composants suivent.
Les classes -touch servent à forcer un élément dans un écran d'une autre densité : un bouton de validation de 48 px en bas d'un écran compact, une case de 28 px dans une liste pour tablette affichée sur magasin.
Code
<div class="hb-row">
<button class="hb-btn hb-btn-primary hb-btn-touch"><i class="material-icons">check</i>Valider</button>
<input class="hb-field hb-field-touch" placeholder="Champ 48 px" style="width:200px">
<label class="hb-check-label"><input type="checkbox" class="hb-check hb-check-touch" checked> Case 28 px</label>
</div>
<button class="hb-btn hb-btn-primary hb-btn-touch-lg" style="max-width:360px">Bouton pleine largeur 56 px</button>Ce qui change en touch
| Token | normal | compact | touch |
|---|---|---|---|
--fs-body | 15 px | 13,5 px | 17 px |
--fs-label, --fs-small | 13 px | 12,5 px | 15 px |
--control | 36 px | 34 px | 48 px |
--control-sm | 30 px | 30 px | 44 px |
--row | 44 px | 40 px | 56 px |
--icon | 20 px | 18 px | 24 px |
| case, radio | 22 px | 22 px | 28 px |
- Cible tactile minimale :
--touch-target(44 px) partout, même en compact ; en touch, 48 px. - Le survol n'existe pas au doigt : poignées, actions de ligne et liens d'ajout sont toujours visibles (
hover: none). - Les gants et les doigts humides demandent des écarts de 8 px au moins entre deux cibles.