响应式开发中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"/>

View Code

　　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;
            }
        }

View Code

　　js:

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

View Code

　　点击change按钮以前截图以下：

　　

　　点击change按钮以后截图：

　　

总结：

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

　　以上内容为我的拙见，若有问题请指出！！！