关于浏览器的双指缩放
作者：互联网
今天在测试前两天做的全屏展示图片功能的时候，突然发现，当我进入全屏展示图片时，双指放大图片之后取消全屏展示之后，整个页面都会放大。这一点都不用户友好！所以我去搜了搜浏览器原生双指放大相关的资料，在浏览不少网页后，终于找到了解决方案。
在讨论解决方案前，先说明一下 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 以上。
标签：双指,浏览器,缩放,展示,全屏,图片,等级,页面 来源： https://www.cnblogs.com/FreezeNow/p/12169095.html