comment faire pincer / zoom travail sur une image

StackOverflow https://stackoverflow.com/questions/7815956

Question

Je suis en train d'apprendre les astuces pour jQuery mobile et ont été un problème avec le zoom et le zoom sur une image / image sur un data-role = « page. » Y at-il un moyen de faire le travail pincement / zoom sur une image sur l'iPhone en utilisant mobile jquery? Cant get pour travailler sur le simulateur iOS. Voici mon code. 

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Web App</title>

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

<link href="jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-1.5.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site     has been configured as a mobile application. 
To configure the site as a mobile application, go to Site -> Mobile Applications ->     Configure Application Framework... -->
<script src="/phonegap.js" type="text/javascript"></script>
</head> 
<body> 

    <div data-role="page" id="page">
    <div data-role="header">
    <h1>Page One</h1>
    </div>
    <div data-role="content" style="padding:0;">    
           <img src="coffee.gif" width="320" height="480" alt="coffee">
        </div>
    <div data-role="footer">
    <h4>Page Footer</h4>
   </div>
    </div>
</body>
</html>

Merci beaucoup pour votre aide. Très appréciée.

-Bob

Était-ce utile?

La solution

Il est la propriété de métadonnées de la fenêtre qui contrôle ces paramètres.

Suivez cette pour voir comment activer pinch & zoom sur JQM iOS (ne devrait pas vraiment d'importance que vous utilisez PhoneGap).

Hope this helps.

Lorsque jQuery Mobile rend une page, il ajoute la balise meta suivante la tête du document. 

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

est la dimension minimum = 1, échelle maximale = 1 partie de la balise qui désactive le zoom de pincement. Ce que nous devons faire est modify la variable $ .mobile.metaViewportContent. Nous pouvons le faire en utilisant le code suivant. 

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width'; 
});

Si nous voulons limiter la quantité de zoom, on peut utiliser les éléments suivants: 

$(document).bind('mobileinit', function(){ 
    $.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2'; 
});

Autres conseils

modifier la "fenêtre" dans la balise meta avec ce 

<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=2, minimum-scale=0.5, width=device-width, height=device-height, target-densitydpi=device-dpi" />
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top