Comment adapter son site pour les mobiles ?

de , le , 1 5 3 5231 vues

meta viewport


Dans ce tutoriel nous allons utiliser les @media-queries. Je vais vous montrer un exemple et vous pourrez ensuite vous amuser à l'utiliser comme vous voulez. Mais tout d'abord, afin que le téléphone affiche votre site version mobile, il va falloir le préciser dans le header. Intégrez donc cette balise meta dans votre balise <head>.
<meta name="viewport" content="width=device-width; initial-scale=1.0,maximum-scale=1, user-scalable=no">
Le téléphone va donc afficher le site comme une fenêtre de la taille du téléphone, et à l'échelle 1. On précise aussi que l'utilisateur ne peut pas zoomer avec "user-scalable=no".
Si vous ne précisez pas cette balise vous allez vous retrouver avec un site d'une plus petite échelle sur lequel il faut zoomer pour naviguer.

Dans le CSS


Ensuite dans notre CSS, nous allons utiliser un paramètre qui va nous permettre de définir un style en fonction des dimensions de l'écran.
Mon exemple va être simple, c'est basical.fr lui même. Quand la taille de la fenêtre va passer en dessous de 900px je vais faire disparaître le footer.
@media screen and (max-width: 900px) {
     #footer{display:none;}
}
Vous pouvez essayer ! Diminuez la largeur de votre fenêtre et le footer devrait disparaître.

Expliquons un peu ce code :
@media screen va préciser que l'on s'adresse à un écran. Il en existe d'autres mais qui ne sont pas utiles pour notre tutoriel.
and (max-width: 900px) va préciser que ce style ne va s'appliquer que pour une largeur maximale de 900px. Autrement dit quand la fenêtre est plus petite que 900px.


A place de "max-width" vous pouvez jouer sur : width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan et grid

Pour approfondir les différents paramètres associés aux media queries.

Tutoriels conseillés

outils professeur date intitulé
jQuery Mobile Comment installer jQuery Mobile ?