关于浏览器的双指缩放

今天在测试前两天做的全屏展示图片功能的时候，突然发现，当我进入全屏展示图片时，双指放大图片之后取消全屏展示之后，整个页面都会放大。这一点都不用户友好！所以我去搜了搜浏览器原生双指放大相关的资料，在浏览不少网页后，终于有了思路（来源：谷歌快照-简书）。

在讨论解决方案前，先说明一下 name 为 viewport 的 meta 标签吧，这个标签通常是用来对页面进行缩放适配，其有以下几个属性

width：用于控制视口的宽度（可以理解为 html 标签父元素的宽度），可以设置为数值或 device-width。通常设置为 device-width，指代缩放为 100% 时以 CSS 像素计量的屏幕宽度。

height：类似于 width

initial-scale：用于控制页面初始加载时的缩放等级，通常设为 1

maximum-scale：控制最大缩放等级

minimum-scale：控制最小缩放等级

user-scalable：控制用户是否可以缩放页面，值为 yes 或 no，默认设置为 yes

以上资料来源于MDN

不少解决方案均是设置所有缩放等级为 1 并禁止缩放，于是我便想，在缩放后设置最大缩放等级为 1 会怎么样呢，便去代码中测试，当关闭全屏展示图片时，设置最大缩放等级为 1。

开启浏览器测试，放大图片后关闭，页面缩放到等级 1，完美。不过这样设置后，第二次全屏展示图片时，便无法缩放图片了，于是便需要在进入全屏展示图片时，取消最大缩放等级。

这时，便完成了在关闭全屏展示图片后页面自动缩放到等级 1 的功能，并在再次打开全屏展示图片后取消缩放限制。不过，如果用户在加载页面后不打开全屏展示图片呢？这种情况下用户还行可以随意放大页面，为了防止用户误操作，便需要在该标签中设置最大缩放等级为 1，令页面在刚加载完时便不可缩放到等级 1 以上。

　　注：手机chrome浏览器：可行

　　　　小米浏览器：可行

　　　　手机火狐浏览器：效果极差

　　　　QQ浏览器：可行

　　　　其他浏览器是否可行请自行测试

代码如下

// 关闭时
document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width,maximum-scale=1")

// 展示时
document.querySelector('meta[name="viewport"]').setAttribute('content', "width=device-width")

---

2020-01-10更新

今天在随手在PC端测试了一下，发现完全无效了。。。紧张了一会发现，chrome浏览器的自动还原缩放只在使用控制台切换到手机调试模式下才生效。