Ah là là… l’optimisation mobile… que c’est compliqué !
En plus on peux pas tester avec tous les navigateurs, c’est compliqué. J’ai créé (avec l’aide d’autres sites) une feuille de style de base (body, html…) pour l’adaptation mobile. Donc, il faut utiliser les @media queries, qui sont assez délicates à manier !
Feuille de style de base pour mobile
Je répète, cette feuille de style adapte votre site à tous les appareils mobiles et autres.
Voici la feuille de style :
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}
body {
width: auto;
margin: 0;
padding: 0;}
img,
table,
td,
blockquote,
code,
pre,
textarea,
input,
iframe,
object,
embed,
video {max-width: 100%;
}
img {
height: auto;
}
textarea,
table,
td,
th,
code,
pre,
samp {-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word;}
code,
pre,
samp {white-space: pre-wrap;
}
colonne1, colonne2 {
float: none;
width: auto;}
@media (max-device-width:768px) and (orientation: landscape) {html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;}
}
Il ne vous reste plus qu’à l’intégrer dans votre site !