<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
overflow: hidden;
}
#box{
width: 200px;
height: 200px;
font-weight:bold;">#999;
}
#box2{
width: 300px;
height: 300px;
font-weight:bold;">pink;
}
</style>
</head>
<body>
<div id="box">
<img width="100%" src="https://picsum.photos/id/151/400/300" >
</div>
<div id="box2"></div>
<script src="js/transformCSS.js"></script>
<script src="js/gesture.js"></script>
<script src="js/touchview.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
<script>
document.documentElement.addEventListener(‘touchstart‘,function(e){
e.preventDefault();
},{
passive:false
});
new Touchview(‘#box‘);
new Touchview(‘#box2‘);
</script>
</body>
</html>
移动端缩放和 旋转