如图，html5开发的手机端web在线客服聊天，如何实现图片点击放大，捏合缩放功能？

Question

Answer 1

PhotoSwipe 类似于这种？

如果想自己实现的话不外乎就是一个弹窗，然后捕捉 touch 事件，然后根据触发点的距离变化来控制图片的放大缩小。

Answer 2

一个比较简单的办法是 点击图片 弹窗单独显示图片 然后让网页可缩放（修改meta（viewport）content信息，但是记录修改前的content，以便恢复正常窗口时恢复设置）。这样利用原生的浏览器功能即可实现图片缩放。

只要修改meta中content属性里的user-scalable设置为1就可以缩放了。

// 弹窗时记录meta信息
recordMeta () {
  let meta = document.querySelector('meta[name="viewport"]')
  let metaInfo = {}
  let content = meta.getAttribute('content')
  let contentList = content.split(',')
  contentList.forEach(item => {
    let [key, value] = item.split('=')
    metaInfo[key] = value
  })
  this.metaInfo = { ...metaInfo }
  metaInfo['user-scalable'] = 1
  this.setMeta(metaInfo)
},
// 弹窗关闭时恢复meta信息
recoveryMeta () {
  if (this.metaInfo) {
    this.setMeta(this.metaInfo)
    this.metaInfo = null
  }
},

setMeta (metaInfo) {
  let contentList = []
  for (let key in metaInfo) {
    contentList.push(`${key}=${metaInfo[key]}`)
  }
  let content = contentList.join(',')
  let meta = document.querySelector('meta[name="viewport"]')
  meta.setAttribute('content', content)
},