[JQuery Mobile] Impossible de zoomer

Bonjour,

Lorsque je navigue sur certaines pages de mon application web, je ne parviens pas à zoomer via le swap.

Est-ce que vous sauriez pourquoi ? Un des éléments utilisé annule-t-il le zoom ?

Merci d'avance.

NB : le code suivant provient de pages JSP. J'ai supprimé tous les appels JSP afin de rendre ces pages plus facilement compréhensible

Header commun aux 2 pages :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- On indique au navigateur que le contenu est déjà optimisé pour une visualisation mobile -->
<meta name="HandheldFriendly" content="true" />
<!-- Initialisation des données si le media est "téléphone" -->
<meta name="viewport" content="height=device-height; width=device-width; initial-scale=1"> 
<link rel="stylesheet" href="../styles/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="../scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../scripts/jquery/jquery.dump.js"></script>
</head>
<title>Titre</title>

Voici une page avec Zoom possible :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body data-ajax="false" ononline="updateIndicator()" onoffline="updateIndicator()">
	<div data-role="page" id="page_accueil">
            <div data-theme="a" data-role="header">
                <h3>Accueil</h3>
            </div>
            <div data-role="content">
                <form action="mails.jsp" method="POST" data-ajax="false" data-disable-page-zoom="false">
			<input data-theme="a"  name="account" value="Tout" data-icon="arrow-r" data-iconpos="right"  type="submit" data-ajax="false"/>
			<input name="id" value="<%= 0%>" type="hidden"/>
		</form>
		<form action="mails.jsp" method="POST" data-ajax="false" data-disable-page-zoom="false">
			<input data-theme="a"  name="account" value="0" data-icon="arrow-r" data-iconpos="right" data-ajax="false" type="submit"/>
			<input name="id" value="0" type="hidden"/>
		</form>
	            <a data-role="button" data-transition="fade" data-theme="a" href="my_abo.jsp" data-icon="arrow-r" data-iconpos="right" data-ajax="false"> Mon compte</a>
	            <a data-role="button" data-transition="fade" data-theme="a" href="reglages.jsp" data-icon="arrow-r" data-iconpos="right" data-ajax="false">Reglages </a>
                <div style=" text-align:center">
			<a data-transition="fade" href="about.jsp" data-ajax="false">
	                <img style="width: 10%; height: 10%" src="../images/info.jpg" />
	            </a>
                </div>
            </div>
    </div>
</body>
</html>

Page où le zoom est impossible :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<body data-ajax="false">
	<div data-role="page" id="page_mails">
		<div data-theme="a" data-role="header" id="header_mail">
			<a data-role="button" data-transition="fade"
				href="accueil.jsp" data-icon="arrow-l" data-iconpos="left" data-ajax="false"> Accueil</a>
			<h3>Boite de réception	(X)</h3>
		</div>
		<div data-role="content">
			<div class="content-primary">	
				<ul data-role="listview">
					<li>
						<form action="view_email.jsp" name="email_0" method="POST" style="display:none">
							<input type="hidden" name="id" value="0"/>
						</form>
						<a onclick="document.forms['email_0'].submit()"><img src="../images/gmail-logo.jpg" />
						<div style="width:100%"><div style="text-align: right;font-size:10px;">Date : la date</div></div><h3><div style="text-align:left">Sujet : le sujet</div></h3>
							<p>From : from</p>
							<p style="margin-top: 5px;">Description courte</p>
							</a>
						</li>
					</ul>
			</div>
			</div>
		<!-- Footer -->

		<div data-theme="f" data-role="footer" data-position="fixed" class="footer_page">
			<div data-role="navbar">
				<ul>
					<li><a data-role="button" data-transition="fade"
						data-theme="c" href="info_pub.jsp" data-ajax="false"> Info/Pub
					</a></li>
					<li><a data-role="button" data-transition="fade" data-theme="c" href="spams.jsp" data-ajax="false"> Spams</a></li>
					<li><a data-role="button" data-transition="fade"	data-theme="c" href="mails.jsp" data-ajax="false" class="ui-btn-active"> mails</a></li>
					<li><a data-role="button" data-transition="fade"	data-theme="c" href="stats.jsp" data-ajax="false"> Stats	</a></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

Solution trouvée !!
Il faut insérer une div entre la div "page" et les autres divs :

Code:

<div class="type-interior ui-page ui-body-c ui-page-header-fixed ui-page-footer-fixed ui-page-active">

Voici un exemple d'utilisation :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body> <div data-role="page" id="page_info_pub"> <div class="type-interior ui-page ui-body-c ui-page-header-fixed ui-page-footer-fixed ui-page-active"> <div data-theme="a" data-role="header" data-position="fixed" class="ui-state-persist ui-bar-a in"> <a data-role="button" data-transition="fade" href="accueil.jsp" data-icon="arrow-l" data-iconpos="left" data-ajax="false"> <%=resource.getString("home")%> </a> <h3><%=resource.getString("info_pub")%> (X) </h3> </div> <div data-role="content"> .... </div> <div data-theme="f" data-role="footer" data-position="fixed" class="ui-btn-active ui-state-persist"> ........ </div> </div> </div>
NOTE IMPORTANTE : la div "footer" ne doit pas être comprise dans la div à ajouter.

En espérant que cela puisse aider d'autres personnes.

site web mobile - Permettre le ZOOM

Le meta suivant bloque le ZOOM.

<meta name="viewport" content="height=device-height; width=device-width; initial-scale=1">

Le code suivant permet le zoom:
<meta name="viewport" content="width=device-width">

J'espère que ça va vous aider.

Voici un bon logiciel pour créer des sites Web mobile: Management-Ware Webelement