基於screen.width的僞響應式開發

一、站在用戶的角度看問題

一個用戶，訪問一個web頁面的真實場景是怎樣的呢？

下面是某用戶訪問某站點的一個場景：

1. 小明打開了自己的電腦，訪問了鑫空間-鑫生活；
2. 小明體內洪荒之力無法控制，瘋狂拖動瀏覽器改變其寬度感受頁面佈局變化；
3. 臥槽，發現頁面居然是響應式的，不由得感嘆：實現的夠騷氣！

很顯然，小明要麼是雷蜜胡粉心碎抓狂，要不就是前端開發職業病發作難耐。作爲真實的用戶是不會把瀏覽器刻意縮小去體驗的，你想想看你平時上網的時候，會把瀏覽器窗口拉到很小嗎？怕是嫌屏幕小，恨不得顯示器大到鋪滿辦公桌吧~~

二、回到傳統的響應式開發

傳統的響應式實現往往基於基於media query查詢，例如：

@media screen and (max-width: 480px) {
    /* 窄屏下 */
}

這是基於CSS的佈局控制，因此，當我們縮小瀏覽器窗口，可以即時看到佈局變化。但是，這種實現在我看來，除了讓總監大人可以方便體驗窄屏效果外，就然並卵了！而反倒是有可能增加了額外的資源消耗和開發成本。

@media可以即時控制寬窄佈局，很自然地，我們的JS邏輯也要一併跟上。假如說，PC和mobile有很多不同的交互邏輯，我們的HTML是同一套，當我們在響應PC和Mobile零界點不停變換的時候，我們的JS邏輯是不是也要跟着即時變化！

這就導致問題來了，CSS瀏覽器渲染，本身即時響應。但JS且不一樣，我們必須實時監測是PC寬度還是Mobile寬度，同時PC的click事件和Mobile的touch事件可能就在同一個元素上搞基了，也蠻累心的。爲了我們自己省心，我們就可能去限制設計師再做響應式設計的時候，兩者差異不要太大。我去，技術已經不是幫助產品設計體驗升級，而是去制約設計了，貴司的設計師好慘！

還有一個問題就是資源消耗的問題，拿網站頭圖舉例，PC的頭圖可能是張大大的長圖，Mobile是個方方的圖片。即時響應也就意味着這兩個圖都可能會被加載。

那有沒有什麼辦法既能滿足響應式的需求，同時我們開發這邊不要那麼煩心呢？

試試使用screen.width來做僞響應式開發。

三、screen.width僞響應式開發

首先要了解下不會說謊的screen.width，screen.width顧名思義就是屏幕的寬度，對，屏幕的寬度，與顯示器寬度沒有任何關係，就算你把顯示器寬度縮小到芝麻糊那麼大，screen.width還是不會變。

在“CSSOM視圖模式相關整理”一文中有過介紹，包括IE6在內的瀏覽器全支持。

由於screen.width不會說謊，我們就可以瞬間確定用戶實現的寬屏設備還是窄屏設備，而@media screen的寬度是瀏覽器的可用寬度，很容易就被用戶欺騙的。

關於screen.width可能的疑問

手機如果橫着訪問會怎樣？
根據我在自己手機上的測試，你手機橫過來還是豎過來，screen.width都是你屏幕豎着瀏覽時候的寬度。好比腎6，你橫豎瀏覽，此時screen.width都是375px;
PC瀏覽器如何測試？
測試的話不是縮小瀏覽器寬度，而是打開控制檯，進入手機模式，此時，screen.width也會跟着一起變哦~記得刷新下頁面~

只要我們確認了用戶的屏幕尺寸，我們就可以在一開始就確定我們的頁面佈局以及所需要的交互，例如，可以在<head>標籤內放入這麼一段內聯script:

(function(doc, win) {
    var screenWidth = 0, size = 'M', root = doc.documentElement;
    if (window.screen && screen.width) {
        screenWidth = screen.width;
        if (screenWidth > 1920) {
            // 超大屏，例如iMac
            size = 'L';
        } else if (screenWidth < 480) {
            // 小屏，如手機
            size = 'S';
        }
    }
    // 標記CSS
    root.className = size;
    // 標記JS
    win.SIZE = size;        
})(document, window);

上面的腳本在頁面加載的一開始，就確定了是大屏，普通屏還是小屏，然後再執行響應的渲染和腳本執行。您可以根據自己實際項目，修改上面的size變量。

於是乎，我們無論是CSS渲染還是JS邏輯處理，都是1條線下來，完全沒有@media screen即時切換而不得已耦合在一起的JS邏輯處理。

典型的僞響應式代碼如下：

.S .example {
  /* 移動端的樣式 */
}

if (window.SIZE == 'S') {
  // 移動端的處理
} else {
  // 桌面端的處理
}

考慮到真實的用戶使用場景，基於screen.width的僞響應式開發對用戶而言，沒有任何區別，該什麼設備看到的還是那個設備該有的樣子；但是，對於開發人員，也就是我們前端開發自己而言，那就不一樣了，一條故事線下來，邏輯清晰，處理輕鬆，設計師把PC和Mobile涉及的差異再明顯，我也能從容應對，對吧，if{} else{}裏面互不干擾，好輕鬆~