[JQuery Mobile] Impossible de zoomer [Résolu]

PP(Team) · 19/06/2012, 09h23

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 :

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

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 :

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

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 :

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

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>

PP(Team) · 21/06/2012, 14h48

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

Code :

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

<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 :

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

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.

minista · 02/11/2012, 23h40

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

02/11/2012, 23h40	#3
minista Invité régulier Joe Addas Inscription : novembre 2012 Messages : 4 Détails du profil Informations personnelles : Nom : Joe Addas Localisation : Canada Informations forums : Inscription : novembre 2012 Messages : 4 Points : 5 Points : 5	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
	00

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