移动端图片预览缩放-小聪明
移动端开发的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等属性。
将上面的思路实现一波, 嗯,厉害~。
如果选择插件:
- touch.js 中 scale 事件监听亲测失败
- 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标签为初始值
<全文结束>