Une feuille de styles de base pour le Web mobile Feuille de styles mobile

Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces.


 @media (max-width: 640px) { 

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body, element1, element2 {
  width: auto !important;
  margin: auto !important;
  padding: auto !important;
 }

 /* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, object, embed, video {
  max-width: 100% !important;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
  word-wrap: break-word; /* césure forcée */
  white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 element1, element2 {
  float: none !important;
  width: auto !important
 }

 /* masquer les éléments superflus */
 .hide_mobile {
  display: none !important;
 }

 /* Un message personnalisé */
 body:before {
  content: "Version mobile du site";
  display: block;
  color: #777;
  text-align: center;
  font-style: italic;
 }
}


La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (propriété pour l?instant spécifique aux moteurs Safari et Android, -webkit-text-size-adjust).


 @media screen and (max-width:640px) and (orientation: landscape) { 
 body {
  -webkit-text-size-adjust: 70%;
 }
}


Media / Accessibilité