I can use two fingers to diminish the size of an image, but when I let go, the image snaps back to the original size (beyond the boundaries of the device). Can anyone explains why this is? My code portions:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=0.1, maximum-scale=1.0">
[I've tried several different variations of this, including minimum scale of 0.1, 1.0, and leaving it off. ]
------------------------------------------
<script type="text/javascript" src="js/iscroll-zoom.js"></script>
[including iscroll.js has no effect.]
------------------------------------------
<style type="text/css">
body {
padding:0;margin:0; background-color: #000;
overflow: hidden; /* this is important to prevent the whole page from bouncing */
}
#wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: visible;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
/* Prevent text resize on orientation change, useful for web-apps
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none; */
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#scroller li {
padding: 0;
}
</style>
------------------------------------------
<script>
var myScroll;
myScroll = new IScroll('#wrapper', {
zoom: true,
scrollbars: false,
scrollX: true,
scrollY: true,
tap: true
});
}
function returnTo() {
// myScroll.destroy(); //remove this to make return work.
// myScroll = null;
window.location="index.html";
}
</script>
------------------------------------------
<body onload="loaded()">
<div id="output"></div>
<div id='wrapper'><div id='scroller'><ul><li><a href='#' onclick='returnTo()'><img src='wallpaper.jpg'></a></li></ul></div></div>;
</body>