come fare pizzico / zoom lavoro su un'immagine
-
26-10-2019 - |
Domanda
sto ancora imparando i trucchi per jQuery Mobile e sono state avendo un problema con lo zoom in e zoom out di una foto / immagine su un data-role = "pagina." C'è un modo per far funzionare il pinch / zoom su un'immagine su iPhone utilizzando jQuery Mobile? Cant farlo funzionare sul simulatore iOS. Ecco il mio codice.
<!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>
Grazie mille per il vostro aiuto. Molto apprezzato.
-Bob
Soluzione
It's the viewport metadata property that controls those settings.
Follow this to see how to enable pinch & zoom on JQM iOS (shouldn't really matter that you are using PhoneGap).
Hope this helps.
When jQuery Mobile renders a page, it adds the following meta tag to the head of the document.
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
It is the minimum-scale=1, maximum-scale=1 part of the tag which disables the pinch zoom. What we need to do is modify the $.mobile.metaViewportContent variable. We can do this using the following code.
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width';
});
If we want to restrict the amount of zooming, we can use the following:
$(document).bind('mobileinit', function(){
$.mobile.metaViewportContent = 'width=device-width, minimum-scale=1, maximum-scale=2';
});
Altri suggerimenti
edit the "viewport" in meta tag with this
<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" />