響應式開發中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這個方案在切換橫豎屏時瀏覽器，會自動計算縮放比率，保證顯示的更清晰，固然也是顯示下設置的寬度，也算是一個小福利。

　　以上內容爲我的拙見，若有問題請指出！！！