Salut,
Je savais que cette question arriverait.
Effectivement, le minimum pour un appareil mobile, c'est ce qu'on t'a recommandé chez OCR :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Si tu es curieux, tu remarqueras que quasiment tous les sites ont cette balise sur toutes leurs pages. Cette balise permet d'adapter la largeur de l'écran à celle des mobiles (quand c'est possible) et de fixer le zoom à 1.
J'espère que tu as fait le mooc sur HTML/CSS de OCR. Parce-que là, il va falloir qu'on aborde les
media queries CSS.
C'est aussi pour ça que je t'avais vivement recommandé d'apprendre Bootstrap parce que ce framework est
responsive (il s'adapte aux mobiles).
Ton site ne sera vraiment adapté aux mobiles que quand il ne ne sera plus nécessaire de déplacer l'écran de gauche à droite, et vice versa.
Une
media querie, ça se présente sous cette forme :
@media screen and (max-width: 767px) {
.main {
width: 100%;
}
img.header {
display: none;
}
}
Dans cet exemple, on redéfinit les classes et id CSS pour les écrans ayant une largeur max de 767 pixels pour que ça s'affiche correctement sur portable.
Pour ton site, tu pourrais débuter avec ça :
@media screen and (max-width: 767px) {
header img img {
display: none;
}
}
Ca cache la deuxième image de l'entête qui devient gênante sur un portable.