Fondations

Plateformes : poste, tablette, iPhone, iPad

nouveau

Le principe

Un écran Hublot s'écrit une fois. Trois choses l'adaptent : la densité (data-density, voir Modes), le pointeur (souris ou doigt, lu par @media (hover: hover) et (pointer: coarse)), la largeur (points de rupture bp-sm 600, bp-md 960, bp-lg 1280). Aucun composant n'a de version « mobile » séparée.

Appareil	Densité	Pointeur	Ce qui change
Poste magasin, crm-front	`normal`, `compact`	souris	survols, actions de ligne révélées au survol, tableaux complets
Tablette Android en rayon	`touch`	doigt	contrôles de 48 px, actions toujours visibles, pavé numérique, pas de survol
iPad	`auto` : `touch` au doigt, `normal` avec clavier à pavé	doigt ou pavé	les deux, selon ce qui est branché ; multitâche à 1/3 d'écran = largeur téléphone
iPhone	`auto` → `touch`	doigt	une colonne sous 600 px, barre basse ou menu, dialogues plein écran, zones de sécurité

Ce que le système fait seul

Pas de survol au doigt : tout ce qui n'apparaît qu'au survol (poignée, actions de ligne, lien d'ajout) est toujours visible quand l'appareil n'a pas de survol (hover: none).
Pas de zoom à la saisie sur iOS : au doigt, les champs font au moins 16 px de texte, même en densité compacte. Sous 16 px, Safari zoome la page dès qu'on touche un champ.
Pas de surbrillance grise ni de délai au toucher sur les contrôles (-webkit-tap-highlight-color, touch-action: manipulation).
Zones de sécurité : la page, la barre basse, la barre de validation, le bouton flottant, le toast et la navigation s'écartent de l'encoche, de la barre d'accueil et des bords arrondis (env(safe-area-inset-*)).
Contrôles natifs au thème : color-scheme et accent-color mettent les sélecteurs de date, les listes déroulantes et les barres de défilement du système dans le thème et la couleur du métier.

Ce que l'application doit faire

Code

<!-- Dans index.html : le contenu peut aller sous l'encoche, les composants s'en écartent -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<!-- Couleur de la barre d'état de Safari et d'Android -->
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#161d27" media="(prefers-color-scheme: dark)">

// magasin : ouvert sur poste, tablette, iPhone, iPad
Vue.use(HublotVuetify2, { vuetify, activity: shop.activity, density: 'auto' })
// application tablette en rayon (Cordova) : toujours touch
window.Hublot.setMode({ activity: 'boucherie', density: 'touch', theme: 'light' })

Un conteneur plein écran prend height: 100dvh (avec 100vh en repli) : la barre d'adresse de Safari iOS va et vient.
Les champs numériques ont inputmode="decimal" (poids, prix) ou inputmode="numeric" (quantités) : le bon clavier sort sur iPhone et Android.
Sous 600 px, un tableau défile horizontalement ; un écran pensé pour le téléphone utilise une liste simple.

Vérifier un écran

Les boutons en haut de chaque page de cette documentation basculent la densité ; la page elle-même passe en tiroir de sommaire sous 960 px. Un écran est validé quand il tient dans les quatre lignes du tableau ci-dessus : à 1280 px en normal, à 1024 px en touch (tablette paysage), à 768 px (iPad portrait) et à 390 px (iPhone).