移动端图片预览缩放-小技巧

移动端图片预览缩放-小聪明

移动端开发的html中一定会有这样一句:

<mate name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

含义:

 <meta name="viewport" content="name=value,name=value">
- width: 设置layout viewport特定值(一般使用device-width)
- initial-sacle: 设置页面初始缩放
- minimum-scale: 最小缩放
- maximum-scale: 最大缩放
- user-scalable: 用户能否缩放

如果这样设置那么h5页面就无法缩放了,想要实现点击图片预览放大缩小只能通过js 控制了。思路:

// 1) 监控页面点击事件,touch、touchstart、touchend
// 2) 转换为手势,缩放、旋转等。
// 3) 在缩放手势的回调中控制图片的大小,如zoom或者transfrom等属性。

将上面的思路实现一波, 嗯,厉害～。
如果选择插件:

1. touch.js 中 scale 事件监听亲测失败
2. Pinchzoom.js ,有奇怪的bug。

综上: 动态改变mate标签
思路:

1) 步骤1
需要预览的图片添加点击事件 handlePreview()
给mate 加个id
<meta id="testViewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0, user-scalable=no">
          
2) 步骤2
改变mate标签
handlePreview() {
	var mvp = document.getElementById("testViewport");
	// 可以缩放
	let newMate = "width=device-width,initial-scale=1.0,maximum-scale=2.0, user-scalable=yes"
	mvp.setAttribute("content", newMate);
}
3) 步骤3
退出预览图片则设置mate标签为初始值

<全文结束>