Appli Web avec pagination

bichehype · 06/07/2011, 10h31

Bonjour à tous,

Je cherche à réaliser un application web mobile qui comporte 3-4 pages. L'utilisateur pourra passer d'une page à l'autre en glissant son doigt à gauche ou à droite (pour ceux qui connaissent comme l'appli du financial times cf.

http://www.youtube.com/watch?v=21ss5LSapBU

).

J'ai fait un premier proto qui ressemble à ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<div id="container">
    <div id="page-1" class="page">Page 1</div>
    <div id="page-2" class="page">Page 2</div>
    <div id="page-3" class="page">Page 3</div>
</div>

J'ai positionné mes pages en absolute en donnant la largeur en fixe avec JQuery. De cette manière les trois pages sont dans le container mais seule une est affichée.

Mon problème, tout se passe bien sur un navigateur web desktop qui est de taille 480x600 mais c'est la cata lorsque je passe sur un vrai mobile : le navigateur fais un zoom arrière pour voir les 3 cadres et donc les 3 pages..

Hésitez pas à demander des précisions si je n'est pas été clair

ornitho13 · 08/07/2011, 08h34

Salut,

il me semble qu'il faille utiliser un tag <meta> dans le <head> de ton document HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

08/07/2011, 08h34	#2
ornitho13 Rédacteur/Modérateur Jérome Debray Responsable de projet Inscription : mai 2009 Messages : 627 Détails du profil Informations personnelles : Nom : Jérome Debray Âge : 32 Localisation : France Informations professionnelles : Activité : Responsable de projet Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2009 Messages : 627 Points : 3 064 Points : 3 064	Salut, il me semble qu'il faille utiliser un tag <meta> dans le <head> de ton document HTML: Code : Sélectionner tout - Visualiser dans une fenêtre à part <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email