Composer une page web adaptée aux mobiles et aux tablettes

Pour permettre au contenu d’une page HTML de s’adapter à l’écran d’un appareil mobile, il faut inclure dans l’en-tête <html:head> la mention

<meta name="viewport" content="width=device-width, initial-scale=1.0" />⚓

Pour le reste, il faut adopter un style coulant, où le flux des informations se place en succession selon l’espace disponible. Il faut éviter les éléments de largeur fixe.

En ce qui concerne les figures composées en SVG, il faut adopter des coordonnées internes pratiques pour la composition et, indépendamment, une largeur qui s’adapte à l’élément parent (qui peut être la page) en donnant à l’élément <html:svg> un attribut svg:viewBox comme

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 400" width="100%">⚓

pour une composition de largeur 840 et de hauteur 400 dans les coordonnées internes servant à la composition, mais dont la largeur d’affichage s’adapte à la largeur disponible. (On pourrait adopter un point de départ autre que x=0, y=0 si c’est plus facile pour composer la figure.)