IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mobiles Discussion :

[JQuery Mobile] Impossible de zoomer


Sujet :

Mobiles

  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2007
    Messages : 387
    Points : 301
    Points
    301
    Par défaut [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 : 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>

  2. #2
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2007
    Messages : 387
    Points : 301
    Points
    301
    Par défaut
    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.

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Inscrit en
    Novembre 2012
    Messages
    4
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations forums :
    Inscription : Novembre 2012
    Messages : 4
    Points : 6
    Points
    6
    Par défaut 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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. jQuery Mobile Alpha 4.1 est disponible
    Par danielhagnoul dans le forum jQuery
    Réponses: 2
    Dernier message: 22/04/2011, 23h44
  2. Limitation de JQuery Mobile avec HTML 5 ?
    Par youtch dans le forum jQuery
    Réponses: 2
    Dernier message: 30/03/2011, 12h13
  3. jQuery Mobile (UI) est disponible en version alpha 1
    Par danielhagnoul dans le forum jQuery
    Réponses: 0
    Dernier message: 18/10/2010, 22h31
  4. jQuery Mobile pour Smartphones & Tablettes
    Par danielhagnoul dans le forum jQuery
    Réponses: 4
    Dernier message: 18/08/2010, 11h35
  5. [jQuery UI] Impossible d'initialiser un draggable()
    Par Arnaud F. dans le forum jQuery
    Réponses: 3
    Dernier message: 18/08/2010, 10h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo