Bonjour,

Je suis entrain de coder des pages pour un site mobile dans le cadre de mon projet scolaire d'été. Je veux adapter l'affichage de mes pages aux écran des smartphones. Ce sont des pages simples en HTML5. Des réponses simples sont les bienvenues(je suis encore novice dans le domaine mobile )

Voici le code HTML5

<!DOCTYPE HTML>
<html>


<head>
<meta charset="iso-8859-1">
<title> HTML5 sectionnement </title>
<link rel="stylesheet" href="css.css">
</head>

<body>

<header>
<h1> Header </h1>
</header>

<div id="container">

<nav>
<h3>Nav</h3>
<p> Lycée Jean Louis</p>
</nav>

<section>
<article>
<header>
<h1> Article Header </h1>
</header>
<p> premier article HTML5.</p>
<p> Démo pour Lycée Jean Louis</p>
<footer>
<h2> Article Footer</h2>
</footer>
</article>
</section>

<aside>
<h3> Aside </h3>
</aside>

<footer>
<h2> c'est le bas de la page </h2>
</footer>

</div>
</body>
</html>

et voici le code CSS


body {
background-color:#CCCCCC;
font-family:Geneva,Arial,Helvetica,sans-serif;
width:90%;
border:solid;
border-color:#FFFFFF;
}

header {
background-color:#F47D31;
display:block;
color:#FFFFFF;
text-align:center;
}

h2 {
text-align:center;
}
nav {
display:block;
width:25%;
float:left;
}

nav a:hover {
color:white;
background-color:#303030;
}
#container {width:100%;
background-color:#888;
}

section {
display:block;
width:50%;
float:left;
}

article { width:75%;
background-color:#eee;
display:block;
float:left;
}
article header {
display:block;
}

aside {
display:block;
width:25%;
float:left;}

Footer { clear:both;
display:block;
background-color:#345467;
color:#FFFFFF;
text-align:center;
}

C'est juste le début de développement mais quand j'ai fait les tests la page ne s'affiche pas centrée avec un HTC Chacha et on a besoin de je faire un back zoom pour voir toute la page. Y a t il une solution à l'aide d'un script par exemple.

Merci Beaucoup