jqueryあるいはjavascriptでピンチイン、ピンチアウトを実装したい。

jqueryを使って2本の指で画像を拡大縮小させる「ピンチイン、ピンチアウト」の実装をしています。

動作環境
Windows PCにxamppをインストールしスマホからアクセスして動作確認しています。
※/xampp/htdocs/dashboard配下にあるindex.htmlに手を入れています。

アクセスURL：PCのIPアドレス/dashboard

実装参考URL：
http://tokidoki-web.com/2015/08/html5%E3%81%A8javascript%E3%81%A7%EF%BD%90%EF%BD%83%E3%83%BB%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%83%9E%E3%83%AB%E3%83%81%E3%82%BF%E3%83%83%E3%83%81%E5%AF%BE%E5%BF%9C%E3%81%97%E3%81%A6%E3%82%84/

https://lab.syncer.jp/Web/JavaScript/Snippet/39/

▼処理の流れ
①画像をタップする

②モーダルで画像が表示されるので画像をピンチイン、ピンチアウトする。

スマホからアクセスしてピンチイン、ピンチアウトができることを確認できたのですが、画面右端、左端までピンチアウトした場合にそれ以上
ピンチアウトできないようにしたいです。以下ソースコードです。

index.html

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<meta charset="UTF-8"><title>画像拡大縮小確認</title>
5		<meta name="viewport" content="width=device-width, user-scalable=no">
6		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
7		<style>
8		* { padding:0; margin:0; }
9		#target1 {
10	    	margin-top: 50px;
11		}
12		</style>
13	</head>
14<body>
15
16	<img class="info" src="200.png">
17
18	<script>
19
20	$(function(){
21
22
23	  function hatena(){
24	    var divElement = document.getElementById( "target1" ) ;
25
26	    var imgElement = document.getElementById( "target2" ) ;
27
28	    var screenWidth = $(window).width();
29
30	    // base
31	    var beseDistance = 0 ;
32	    var baseImageWidth = 0 ;
33	    var baseImageHeight = 0 ;
34
35	    var timeoutId ;
36
37	    // touchmove
38	    divElement.ontouchmove = function ( event ) {
39	    	event.preventDefault() ;
40
41	    	var touches = event.changedTouches ;
42
43	    	if ( touches.length > 1 ) {
44	    		var x1 = touches[0].pageX ;
45	    		var y1 = touches[0].pageY ;
46
47	    		var x2 = touches[1].pageX ;
48	    		var y2 = touches[1].pageY ;
49
50	    		var distance = Math.sqrt( Math.pow( x2-x1, 2 ) + Math.pow( y2-y1, 2 ) ) ;
51
52	    		clearTimeout( timeoutId ) ;
53
54	    		if ( beseDistance && baseImageWidth && baseImageHeight ) {
55	    			var scale = distance / beseDistance ;
56
57	    			if ( scale && scale != Infinity ) {
58	    				imgElement.width = baseImageWidth * scale ;
59	    				imgElement.height = baseImageHeight * scale ;
60
61                //画像の縮小し過ぎ防止
62	            if(imgElement.width <= "200" && imgElement.height <= "200"){
63	              imgElement.width = "200";
64	              imgElement.height = "200";
65
66	              $('#target2').css({
67	                '-webkit-transform':'scale(none)',
68	                '-moz-transform':'scale(none)',
69	                '-ms-transform':'scale(none)',
70	                '-o-transform':'scale(none)'
71	              });
72
73	            } else {
74	                //画面幅を超えてピンチアウトした場合は画面幅を設定する。
75	                if(imgElement.width >= screenWidth){
76	                  imgElement.width = screenWidth;
77	                } else {
78	                  $('#target2').css({
79	                    '-webkit-transform':'scale(' + scale + ')',
80	                    '-moz-transform':'scale(' + scale + ')',
81	                    '-ms-transform':'scale(' + scale + ')',
82	                    '-o-transform':'scale(' + scale + ')'
83	                  });
84	                }
85	            }
86	    			}
87
88	    			timeoutId = setTimeout( function () {
89	    				beseDistance = 0 ;
90	    				baseImageWidth = 0 ;
91	    				baseImageHeight = 0 ;
92	    			}, 100 ) ;
93
94	    		} else {
95	    			beseDistance = distance ;
96	    			baseImageWidth = imgElement.width ;
97	    			baseImageHeight = imgElement.height ;
98
99	    		}
100	    	}
101	    }
102	  };
103
104
105
106
107	  //画像をタップしたらモーダルとして画像を表示する
108	  $('.info').click(function(e){
109
110	    let w = $(window).width();
111	    let h = $(window).height();
112
113	    let cw = $('#hoge').outerWidth();
114	    let ch = $('#hoge').outerHeight();
115
116	    $('#hoge').css({
117	      'left':((w - cw) / 2) + 'px',
118	      'top':((h - ch) / 2) + 'px'
119	    });
120
121	    hatena();
122	    $('#overlay, #hoge').fadeIn();
123	  });
124	  
125	  $('#overlay').click(function(e){
126	      $('#overlay, #hoge').fadeOut();
127	  });
128	});
129
130	var divElement = document.getElementById( "target1" ) ;
131
132	var imgElement = document.getElementById( "target2" ) ;
133
134	var beseDistance = 0 ;
135	var baseImageWidth = 0 ;
136	var baseImageHeight = 0 ;
137
138	var timeoutId ;
139
140	// touchmove
141   divElement.ontouchmove = function ( event ) {
142    	event.preventDefault() ;
143
144    	var touches = event.changedTouches ;
145
146    	if ( touches.length > 1 ) {
147    		var x1 = touches[0].pageX ;
148    		var y1 = touches[0].pageY ;
149
150    		var x2 = touches[1].pageX ;
151    		var y2 = touches[1].pageY ;
152
153    		var distance = Math.sqrt( Math.pow( x2-x1, 2 ) + Math.pow( y2-y1, 2 ) ) ;
154
155    		clearTimeout( timeoutId ) ;
156
157    		if ( beseDistance && baseImageWidth && baseImageHeight ) {
158    			var scale = distance / beseDistance ;
159
160    			if ( scale && scale != Infinity ) {
161    				imgElement.width = baseImageWidth * scale ;
162    				imgElement.height = baseImageHeight * scale ;
163
164		            if(imgElement.width <= "200"){
165		              imgElement.width = "200";
166		            }
167
168		            if(imgElement.height <= "200"){
169		              imgElement.height = "200";
170		            }
171		            
172		              $('#target2').css({
173		                '-webkit-transform':'scale(' + scale + ')',
174		                '-moz-transform':'scale(' + scale + ')',
175		                '-ms-transform':'scale(' + scale + ')',
176		                '-o-transform':'scale(' + scale + ')'
177		              });
178    			}
179
180    			timeoutId = setTimeout( function () {
181    				beseDistance = 0 ;
182    				baseImageWidth = 0 ;
183    				baseImageHeight = 0 ;
184    			}, 100 ) ;
185
186    		} else {
187    			beseDistance = distance ;
188    			baseImageWidth = imgElement.width ;
189    			baseImageHeight = imgElement.height ;
190
191    		}
192    	}
193    }
194</script>
195
196
197<div id="overlay" style="width: 100%; height: 100%; position:fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); display:none; z-index: 1;"></div>
198  <div id="hoge" style="width: 200px; height: 200px; position: fixed; display:none; z-index: 2;">
199    <div id="target1">
200        <img id="target2" src="200.png">
201    </div>
202  </div>
203
204</body>
205</html>
206