今天写页面的时候遇到一个问题，需求是开发一个手机站，由于各种原因 ，且用了滑屏的插件，因此在最开始定义了用户端不可缩放，

但是遇到一个功能 查看大图，一般的用户操作习惯是通过双指捏合的方式缩放，因此想了以下几种方案

1、利用js插件来判断手势 ，获取手势后更改图片和遮罩层大小

http://www.cnblogs.com/iamlilinfeng/p/4239957.html

这篇文章里介绍该插件的具体用法，经过5s测试  发现比较实用，但是考虑到插件用起来兼容性较差，且时间也不够，于是没来得及运用；

2.为图片设置链接   通过a标签链接到大图的服务器地址， 经测试，在手机浏览器里点击后可以查看大图，且支持缩放（新页面，默认支持缩放），同时，返回时，原来的页面保留原状态，这里要说一下，因为整个手机站是单页面，通过滑屏浏览所有内容，因此浏览器返回后，如果页面不刷新是最好的，因为可以保留之前的浏览屏，但是在微信里测试的时候，问题来了，因为打开图片后 在屏幕左侧拖拽实现返回的时候，微信内置浏览器是默认刷新元页面的，不能保留之前的浏览状态，那么用户又要从第一屏滑到之前的屏，这个体验太差了，于是又基于此目的找了下判断微信浏览器的js代码，

微信客户端

微信客户端                // var his_index=window.history.length;                // var ini_index=0;                // var wx=is_weixn();                // function is_weixn(){
                    //         var ua = navigator.userAgent.toLowerCase();                //         if(ua.match(/MicroMessenger/i)=="micromessenger") {
                    //             return true;                //         } else {
                    //             return false;                //         }                // }                // if(wx&&(his_index==2)){
                                                 //            ini_index=9;                                            // }

初次访问时，history 肯定为1  点返回时肯定为2（仅限于这个特殊项目内）但是太笨了 而且操作习惯太隐蔽 ，被否了

3.在点击图片后开启页面的缩放限制  

var viewport = document.querySelector("meta[name=viewport]");                console.log(viewport);                     viewport.setAttribute('content', 'user-scalable=yes');

但是插入后问题就来了，缩放是可以的 ，但是缩放没有还原的情况下点击关闭遮罩层 ，那么显示效果就特别差，视窗直接变了，而且问题太多了，体验太差

4 最后实现的比较简单的思路就是给一个可滚动的div 让用户自己在里面拖