1，问题的提出
某vue前端程序，在手机APP上运行。需要做多图片浏览效果，要求如下：
- 进入浏览页面时，显示适应手机页面的缩小图，
- 用户可采用双指缩放，放大查看小图
- 用户点击图片时，弹出大图，宽度尺寸固定为1200px
- 大图可移动查看，但不允许缩放，点击大图后退出
以上要求中，第2和3叠加后，可能造成显示的大图过大，不利于查看。
如用户在显示小图时，双指放大3倍，此时页面上所有元素均放大3倍；用户再点击图片，此时显示的大图实际宽度为 1200*3=3600px
如此大幅图片并不利于查看图片。
因此，需要采取一种措施，用户可以放大小图，但是在单击显示大图时，不要放大大图的尺寸，而是让大图始终保持宽度尺寸固定为1200px。
2，方案分析
我设想的解决方案是，在显示大图前，获知当前页面的缩放比例R，然后在显示大图前，在程序中设置页面的scale属性为 1/R。即
transform: scale(1/R);
通过设置将页面的缩放抵消掉，使页面仍处于原始大小。这样，查看大图时就能1:1显示了。
但是我在网上搜索良久，竟然未能找到一个方法能获得当前手机页面的缩放比例值。
有说用addEventListener将容器（DIV）的touchstart 、touchmove 进行绑定监听，获得手势的比例，但本人测试发现，双指滑动时这些事件并不触发。
也许是我代码有误，后改为将事件绑定到document上，也不行，获取不到屏幕当前的缩放比。
于是转换思路，看到有文章说到viewport的scale属性，与页面缩放有关。但是查看文档，也只有以下三个初始设置值，并没有一个可以获得当前scale的变量：
- initial-scale
- minimum-scale
- maximum-scale
郁闷中想到，重置initial-scale 为1 也许能让页面比例复原。代码如下：
document.getElementsByName('viewport')[0].setAttribute('content','width=device-width,initial-scale=1.0')
但是，发现上述语句不起作用！
后经反复试验，发现即使页面已经放大，其initial-scale属性值仍然为1，此时用代码去设置为1，相当于没有变化，所以被忽略了没效果。
其实，可以先将scale改为非常接近1的数值，再改回1即可有效。代码如下：
document.getElementsByName('viewport')[0].setAttribute('content','width=device-width,initial-scale=1.01')
document.getElementsByName('viewport')[0].setAttribute('content','width=device-width,initial-scale=1.0')
3，总结
本人对前端编程不熟悉，因此即使是一个小的功能也要摸索好久，好在最终得到了解决。
发此文出来，也是希望有知道如何获得手机当前页面缩放比的大佬教教我，感谢！
标签：vue,缩放,大图,initial,width,scale,页面 From： https://www.cnblogs.com/jackkwok/p/17394327.html