Comment Adapté son site pour smartphone & tablette

CodeOtaku Le 20 février 2018 à 16:40 (Édité le 25 janvier 2019 à 17:54)

Bonjour à tous,

Je cherche à adapté mon site pour tout type d'appareil (autre que mon PC) j'ai essayer de changer le css en
remplaçant les pixels par des pourcents mais le résultat n'était pas
celui escompté. Je pense qu'il faut utiliser les Media Queries mais je
sais pas du tout comment m'y prendre car je voudrais si possible essayer
de garder la même mise en page et ne pas avoir à cacher du contenu en
fonction de l'appareil et donc j'aimerais avoir le code html/css qui
puisse faire cela !

Voilà, merci d'avance, j'attend vos réponses avec impatience
Cordialement

Clouder Le 21 février 2018 à 11:04

Bonjour CodeOtaku,

Pour gérer plus facilement les différentes vues (TV, PC, tablette et smartphone) de ton site, je te conseil d'utiliser Bootstrap.
Cela te permettra de ne pas forcément réécrire ce qui est déjà existant ailleurs.

CodeOtaku Le 23 février 2018 à 01:12

D'accord merci beaucoup, je pense que je vais l'utiliser; Mais es ce que t'aurait des sites, vidéos que tu pourrais me recommander pour débuter sur Bootstrap afin que je puisse l'intégrer à mon code pour adapter mon site pour mobile !
Cordialement

Profil introuvable Le 24 février 2018 à 19:09

Re:

Hello 'CodeOtaku', tu exagères sur ce point... Mais j'ai été gentil de prendre le temps de chercher pour toi... 😀
Un tutoriel sur le site du zéro.
Un tutoriel de Grafikart.
Et si tu veux d'autres tutoriels, il y en a plein sur YouTube (en entrant le terme "tutoriel bootstrap")
Mais il y a peut-être un petit soucis avec Bootstrap. (J'ai horreur d'utiliser les frameworks)

ThomasT Le 25 février 2018 à 17:06

Bonjour,
Si jamais tu souhaites faire du responsive pur sans bootstrap, voici un début de code CSS :

@screen media and (max-width: 750px){

}

tout ce qui se trouvera entre les crochets seront appliqués lorsque la taille de l'écran de l'utilisateur sera inférieure à 750px 😉

CodeOtaku Le 28 février 2018 à 14:47

Re ThomasT :
J'ai compris la base des Medias Queries
Mais quand je modifie dans les accolades avec *{width:auto;} le site ne s'adapte pas du tout ! Car je voudrais si possible ne pas avoir à utiliser le display:none; et garder la même mise en forme en empêchant le visiteur de pouvoir zoomer mais lorsque j'utilise ce code on peut quand dézoomer sur téléphone et du coup cela détruit la mise en forme de mon site

<meta name="viewport" content="initial-scale=1.0,user-scalable=no">

Je ne comprends ou est mon erreur merci d'avance !!!

Profil introuvable Le 2 mars 2018 à 20:41 (Édité le 2 mars 2018 à 20:56)

Re:

Essaye plutôt avec cette métadonnées :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui, shrink-to-fit=no" />

Celle-ci adapte le contenu aux mobiles et empêche l'utilisateur de zoomer, toutefois si tu souhaites que l'utilisateur zoom mais que l'affichage reste adapté aux smartphones alors utilise plutôt cette métadonnées :

<meta name="viewport" content="width=device-width, initial-scale=1" />

Si tu souhaites que le contenu de ton site s’adapte à n'importe quelle largeur d'écrans, c'est ici et ici.

N'hésite pas à vérifier ton code HTML et CSS à l'aide du W3C (pour HTML ; pour CSS). N'hésite pas aussi à vérifier ton code à l'aide de Firefox ! (Si Firefox affiche un bout de code en rouge cela signifie qu'il y a une erreur de syntaxe ou de positionnement) 😉

PS : Si ton site est en ligne, n'hésite pas à partager le lien (si et seulement si) 😉

minianna1234567 Le 5 août 2019 à 05:37

The information you shared with us was very helpful, thank you very much.
hotmail entrar

Échange

Articles / Vidéos

Ressources