Rendre mon site compatible avec les navigateurs smartphone
bonjour à tous
j'ai créé un site web, lorsque je le visite sur mon PC tout est normal mais lorsque je le lance sur Opéra mini Sur mon smartphone ou sur tablette tout est Anormal, les partie de la page sont en désordre
comment régler le problème Svp et merci
N.B:
mon site est www.maaloma.net
j'ai créé un site web, lorsque je le visite sur mon PC tout est normal mais lorsque je le lance sur Opéra mini Sur mon smartphone ou sur tablette tout est Anormal, les partie de la page sont en désordre
comment régler le problème Svp et merci
N.B:
mon site est www.maaloma.net
2 réponses
-
Opera mini te montre une version ultra allégée de ton site pour un chargement rapide tu dois donc faire une page qui détecte le navigateur et rediriger l'utilisateur vers la page qui lui convient en gros tu dois faire 1 site pour pc ,1 site épuré pour opera mini et 1 site pour les autres navigateurs mobiles comme safari ou chrome. J'espère que j'étais assez clair
-- -
Salut
désolé mais la solution donné par zogolo est obsolète
maintenant on utilise
les media queries en css ainsi que la balise
meta name="viewport" en mettant l'initial scale à 1
cela évite d'avoir 3 sites avec des sous domaines
1 seul site mais des affichages différents selon la résolution d'écran.
donc renseigne toi la dessus c'est simple quand on connait le css
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.-
-
tu commence par mettre ce code dans le head
<meta name="viewport" content="initial-scale=1.0">
<link href="style.css" media="screen and (min-width: 1000px)" rel="stylesheet" type="text/css">
<link href="responsive.css" media="screen and (max-width: 999px)" rel="stylesheet" type="text/css">
tu colles tout ton code css (style.css) dans responsive.css
tu affiche ton site en local tu reduis la fenetre
dans responsive.css tu commence avec
#bloc_page {
background-color: #85abc6;
margin: auto;
max-width: 1000px;
width:90%;
}
etc pour tous tes autres éléments
(c'est un exemple) -
-
oui et transformer petit a petit responsive.css en visualisant dans un navigateur en réduisant la fenetre
en fait il y 2 méthodes
utiliser 2 fichiers (le plus simple)
utiliser 1 seul fichier et faire et plus des déclarations normales des
media screen and (max-width: 999px) {
#bloc_page {
background-color: #85abc6;
margin: auto;
max-width: 1000px;
width:90%;
}
}
etc .. (mais si il y a beaucoup de transformation ca devient vite illisible)
et appeler le fichier css de façon normale
pour la 1ere méthode rajoute aussi dans le head
<!--[if lte IE 8]><link href="style.css" rel="stylesheet" type="text/css"><![endif]-->
avant l'appel aux css parce que ie8 et inferieur ne comprend pas les media queries
en savoir plus : https://www.alsacreations.com/article/lire/930-css3-media-queries.html -
-
