1485 sujets

Web Mobile et responsive web design

Mon site responsive design ne fonctionne que sur ordinateur

Bonsoir,

j'ai fait un site en responsive design. Quand je le teste sur ordinateur 17 pouces, il se redimensionne correctement quand je diminue progressivement la fenêtre jusqu'à la taille d'un smartphone.

Le problème, c'est quand je le visualise sur un smartphone, il reste à la taille d'un écran pour ordinateur.

Ai-je oublié quelque chose ?
Merci pour votre aide.
Bonsoir bibi67,

il est pas encore en ligne.
Mais effectivement, je n'ai pas la balise meta viewport. Est-ce que cette balise permet de spécifier au mobile de ne pas dézoomer ? Avez-vous un exemple d'utilisation générique de cette balise svp ? Merci
Voici le code :

<head>
	<title>...</title>
<META charset="utf-8" />
<META NAME="description" CONTENT=""> 
<META NAME="keywords" CONTENT="">
	<link rel="stylesheet" media="screen"  href="css/style.css" type="text/css" />
	<script type="text/javascript" src="js/accueil.js"></script>
</head>


style.css : 
@media screen and (max-width: 700px)
{
	#menu li {
    		visibility: hidden;  
	}
	#raisonsocialimg {
    		visibility: hidden;  
	}
	#boutonmenuimg {
		position:absolute;
		z-index : 1 ;
		visibility:visible; 
		top : 20px ;
		left: 200px;
	}
	#menumobile {
		position:absolute;
		z-index : 10;
		visibility:hidden;
		background: #c4db7d ;
		top:85px;
		width : 100%;	
		height: 200px;
		text-align:center;
	}
...}

Modifié par jced (26 Jul 2015 - 20:39)
Administrateur
Bonsoir,

jced a écrit :
Est-ce que cette balise permet de spécifier au mobile de ne pas dézoomer ?

Oui tout à fait.

jced a écrit :
Avez-vous un exemple d'utilisation générique de cette balise svp ?

L'exemple proposé dans l'article cité apr bibi67 par exemple Smiley cligne

Bonne soirée,

Raphaël
Merci à tous, ça fonctionne
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
Administrateur
jced a écrit :

&lt;meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/&gt;

Empêcher l'utilisateur d'agrandir les contenus est une très mauvaise idée (autant ergonomique qu'en terme d'accessibilité).
Pourquoi ne pas utiliser la meta viewport proposée dans l'article et qui fait très bien le boulot ?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sujet clos
Aller à