响应式开发中pc-view和mobile-view切换以及viewport拙见

背景：

　　最近在项目开发中遇到一个需求。项目背景为，该项目在由pc端入手，pc端开发完成，一部分页面实现响应式，pc端开发完成之后，着手mobile端开发之后，开发中途倒霉的客户提出一个需求，就是和淘宝一样，加入一个pc端和mobile端切换的按钮。就是说在浏览移动端的页面，用户在用着用着不爽了，想点一下按钮看一下pc端的界面。研究了一下淘宝，发现淘宝pc端和移动端根本就不是响应式，而是两套完全不同的页面，大写的尴尬~~~。接着研究，发现了在写响应式的时候，一开始就加上了一个标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 

只知道写响应式要加上这个标签，正好遇到问题了，也就顺便研究了一下这个标签，谁知道就在这个标签研究中得到了这个解决方案。

viewport简介：

　　下面记录一下这个标签的各个属性的意思,写出我理解的意思（如有不对请诸多大神多多指教）。其实百度一下很多网站都有介绍。
 　　viewport:也就是我们看到的窗口。
　　width:也就是我们看到的窗口所代表的宽度，如果值为“device-width”,就是说如果你的手机宽度是414px吗，那么你看到的页面宽度也是414px的，如果值写为1240，那么在414px宽度的屏幕代表的就是css上1240px。一般都设置为“device-width”,网上称之为理想视窗宽度。也就是在移动1px宽度就是代表css上1px，比较容易去计算也不容易失真，自然是理想宽度。
　　initial-scale:初始缩放比例，具体功能在我理解和width的功能一样，都是设置mobile端所代表的css宽度。唯一不一样的就是 ，initial-scale代表的是缩放比例，可以是小数，不是直接的css宽度，所代表的css宽度是通过屏幕的物理宽度除以本属性的值来获取的。有的客官说，这不是和上面的属性冲突了吗，其实并不冲突，两者都设置时，会取其计算后css宽度比较大的属性。还有一些兼容性的问题，就不一一赘述了。
　　user-scalable:禁止用户缩放，设置为no或者0，即不可缩放，就是不允许用户缩放。即用户用手势把页面放大。亲测在ios10及以上版本不好使，andriod兼容性不一。不过有个功能可以在ios上用一下,设置为no时可以防止用户点击输入框时，浏览器把页面放大。
 剩下两个属性，啥意思根据字面意思自己猜。

解决方案：

　　各大属性说完了，下面说说，我是怎么解决那个头痛的需求的。
 　　大家都知道 响应式开发大家都是在css上使用媒体查询。记得要用screen-width查询哦，如果是device-width查询那就不好用了。说道这个地方解决方案也就呼之欲出了。媒体查询screen-width应该就是查询viewport的宽度,也就是视口宽度。解决方案就是修改
meta标签里那个 viewport的width属性或者initial-scale，下面就通过下面例子看一下到底好不好用呢。代码如下，截图如下。

　　html:

    <div class="demo-pc-show">我是pc-view</div>
    <div class="demo-pc-hide">我是mobile-show</div>
    <input type="button" value="click me to chang view"/>

　　css:

  * {
           margin:0;
           padding:0;
        }
        div {
            width:100%;
            height:500px;
            background-color:yellowgreen;
            color:red;
            font-size:24px;
            font-weight:bold;
            display:none;
            line-height:500px;
            text-align:center;
        }
        input {
            width:200px;
            height:50px;
            background-color:#222;
            color:#fff;
            font-size:16px;
            display:block;
            margin:0 auto;

        }
         @media only screen and (min-width: 769px) {
            .demo-pc-show {
                display:block;
            }
            .demo-pc-hide {
                display:none;
            }
        }
        @media only screen and (max-width: 768px) {
            .demo-pc-show {
                display:none;
            }
            .demo-pc-hide {
                display:block;
            }
        }

　　js:

   $(function () {
            $('input').on('click', function () {
                var meta = $('meta[name="viewport"]');
                meta.attr('content', 'width=1240, user-scalable=0');
            });
        });

　　点击change按钮之前截图如下：

　　

　　点击change按钮之后截图：

　　

总结：

　　通过上面方案问题得到解决，当然可能会有一些兼容性问题，安卓系统几天一个版本，各大手机厂商可能还有修改，不可能保证百分之百兼容但是在ios下应该是可行的，安卓也大部分可行。当然还有其他的解决方案，比如通过js修改css的媒体查询，具体做法是通过js去遍历window上某个css的属性，改变媒体查询，会带来效率问题，所以舍弃了这个方案。应用viewport这个方案在切换横竖屏时浏览器，会自动计算缩放比率，保证显示的更清晰，当然也是显示下设置的宽度，也算是一个小福利。

　　以上内容为个人拙见，如有问题请指出！！！