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