Une feuille de styles de base pour le Web mobile Préambule : fixer le Viewport
Les règles de mise en forme dédiée au média mobile peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l'aide d'une règle media query de type @media (max-width: 640px) {...}.
Pour être efficient au maximum, il convient de définir au sein du code HTML un élément méta Viewport de type <meta name="viewport" content="width=device-width" />
Cette étape a pour principal avantage d'éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s'y adapter par la suite. Cette instruction court-circuite le viewport par défaut, souvent bien trop large, et fournit une base commune plus proche de la réalité. Un article paraîtra prochainement à ce propos.
Eviter le redimensionnement automatique de la mise en page
L'objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels.
Fixer le Viewport
Pour être efficient au maximum, il convient de définir au sein du code HTML un élément méta Viewport de type <meta name="viewport" content="width=device-width" />
Cette étape a pour principal avantage d'éviter le redimensionnement automatique de la mise en page, qui rend les contenus trop petits, de fixer la largeur du mobile et de pouvoir s'y adapter par la suite. Cette instruction court-circuite le viewport par défaut, souvent bien trop large, et fournit une base commune plus proche de la réalité. Un article paraîtra prochainement à ce propos.