tilomitra/pinch-to-zoom.html

## pinch-to-zoom.html
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" />
    <title></title>
    <script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>

    <style>
        #box {
            width: 150px;
            height: 150px;
            background: #ccc;
            position: relative;
            top: 10%;
            left: 10%;
        }
    </style>
</head>
<body>

    <div id="box"></div>

    <script>
        YUI().use('event-move', 'node', function (Y) {
            var box = Y.one('#box');
            box.on('touchstart', function (e) {
                console.log('touchstart ' + ' with ' + e.touches.length + ' touches');
            });

            box.on('touchmove', function (e) {
                var s = 150;
                console.log('touchmove ' + ' with ' + e.touches.length + ' touches');
                Y.one('#box').setStyles({
                    width: s * e.scale + 'px',
                    height: s * e.scale + 'px'
                });
                console.log(e.scale);
            });

            box.on('touchend', function (e) {
                console.log('touchend ' + ' with ' + e.touches.length + ' touches');
            });
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'/>
	<meta name="viewport" content = "width = device-width, initial-scale = 2.3, user-scalable = no" />
	<title></title>
	<script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>

	<style>
	#box {
	width: 150px;
	height: 150px;
	background: #ccc;
	position: relative;
	top: 10%;
	left: 10%;
	}
	</style>
	</head>
	<body>

	<div id="box"></div>

	<script>
	YUI().use('event-move', 'node', function (Y) {
	var box = Y.one('#box');
	box.on('touchstart', function (e) {
	console.log('touchstart ' + ' with ' + e.touches.length + ' touches');
	});

	box.on('touchmove', function (e) {
	var s = 150;
	console.log('touchmove ' + ' with ' + e.touches.length + ' touches');
	Y.one('#box').setStyles({
	width: s * e.scale + 'px',
	height: s * e.scale + 'px'
	});
	console.log(e.scale);
	});

	box.on('touchend', function (e) {
	console.log('touchend ' + ' with ' + e.touches.length + ' touches');
	});
	});
	</script>
	</body>
	</html>