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

一个比较简单的办法是 点击图片 弹窗单独显示图片 然后让网页可缩放(修改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)

},