La même page dans deux cadres de largeurs différentes, réduite à l'échelle. À gauche le paysage (iPad et Mac), à droite le portrait (iPhone). Les trois boutons d'état sont dans chaque cadre, et ils marchent : scène vide, scène à 3 instruments, scène pleine à 6.
Pour juger vraiment, ouvre maquette.html en plein écran sur l'iPad puis sur l'iPhone : les cadres ci-dessus sont réduits, donc les cibles tactiles n'y font pas leur taille réelle. Mesurées en plein écran : l'emplacement de scène fait 275 px sur l'iPad et 91 px sur l'iPhone, le jeton de réserve 81 px et 67 px. Le plancher du cahier des charges est 64 px, il tient partout, jusqu'à un iPhone SE.
Cette page-ci se regarde sur l'iPad. Sur un téléphone, le cadre paysage est réduit à un quart de sa taille, donc illisible : c'est inévitable, on ne montre pas une mise en page de 1180 px sur un écran de 390. Sur le téléphone, ouvre directement maquette.html.
Ce qui n'est pas dans la maquette, volontairement : aucune animation, aucun son, aucun glisser-déposer. C'est l'ordre de travail que tu as fixé, la mise en page d'abord. Une seule chose bouge, l'interrupteur des trois états, pour que les trois cas du cahier des charges se voient sans recharger.