移動web屏幕適配方案

剛進部門就被拉去趟移動端Web的渾水，視覺稿是按照640px設計的。那如何做屏幕適配呢？當然想到的第一方法就是問前輩了，問他們之前怎么做的，前輩說直接按視覺稿來，我說640太大了，他說除以2啊，按320來。。我說不行吧，屏幕多種多樣的，6 plus顯示的得多小。。他說你和視覺溝通下。。。orz。。。還是自食其力吧——網絡搜索，大概能搜到一些，不過要么太高大全（淘寶的方案），要么都是零零碎碎的。最終根據淘寶的方案還有Rem這個單位，自己做了一套簡單的方案。

---

開始呢，還是要對一些概念做一些說明，當然不是我說明。。。

看這里，還有這里

最終的目的就是知道：

設備像素比 = 物理像素 / 設備獨立像素

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

 

淘寶的方案

首先使用JavaScript動態計算dpr，就是上面我們說道的設備像素比，然后在html head里設置viewport里的width以及scale，使得屏幕整體縮放，比較完美的解決了border 1px、各種奇葩屏幕的適配問題。並且在html上加一個自定義的屬性data-dpr來針對不同的屏幕寫css。

/**
 * 動態計算dpr
 */

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * 2 / 10;
scale = 1 / dpr;


// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 設置data-dpr屬性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem = function(v) {
    v = parseFloat(v);
    return v / rem;
};

window.dpr = dpr;
window.rem = rem;

然后對於div、字體或者其他css屬性，都使用data-dpr來做媒體查詢寫不同的css。

個人感腳，有種太高大全的感覺，而且有些復雜了。最最重要的，有的手機，比如我的千元智能機，沒有識別meta標簽的縮放，頁面依然巨大。

 

媒體查詢

我感覺最經濟實惠的就是媒體查詢了，根據市場占有率與自己產品所注重的用戶群體，得出需要適配的機型和屏幕，寫media query即可了。

@media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){
    /*iphone 6*/
}
 
 
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){
    /*iphone 6 plus*/
}

給出NEC的方案：

/* media */
/* 橫屏 */
@media screen and (orientation:landscape){
      
}
/* 豎屏 */
@media screen and (orientation:portrait){
      
}
/* 窗口寬度<960,設計寬度=768 */
@media screen and (max-width:959px){
      
}
/* 窗口寬度<768,設計寬度=640 */
@media screen and (max-width:767px){
      
}
/* 窗口寬度<640,設計寬度=480 */
@media screen and (max-width:639px){
      
}
/* 窗口寬度<480,設計寬度=320 */
@media screen and (max-width:479px){
      
}
/* windows UI 貼靠 */
@media screen and (-ms-view-state:snapped){
      
}
/* 打印 */
@media print{
      
}

 

弱弱的拿出我的方案

我的方案，借鑒了淘寶的JavaScript腳本，動態的設置html的font-size，其余的css屬性使用rem設置。

那么需要確定的font-size的基准值，一般設計稿都是640px寬度給出的，還有一些更高清的750px的，這里借鑒了這篇文章，640px寬度時將基准值設置為20px。

然后在每個html頁面的head加入JavaScript代碼：

    (function(window) {
        var dpr, rem;
        var docEl = document.documentElement,
            fontEl = document.createElement('style');

        dpr = window.devicePixelRatio || 1;
        rem = docEl.clientWidth / 320 / 2 * 20;  // 以640px,html font-size 20px為基准.
        docEl.setAttribute('data-dpr', dpr); 
        docEl.firstElementChild.appendChild(fontEl);
        fontEl.innerHTML = 'html{font-size: ' + rem + 'px!important;}';

        //備用
        window.rem2px = function(v) {
            return parseFloat(v) * 20;
        }
        window.px2rem = function(v) {
            return parseFloat(v) / 20;
        }

        window.dpr = dpr;
        window.rem = rem;
    })(window);

對於其他的css屬性：字體、padding、margin什么的，都用rem，為避免計算麻煩，我們可以使用預處理器寫一下（MCSS）：

$px2rem =  ($px){
    @return ($px / 20 * 1rem);
}

 

這樣，簡單的適配了幾乎所有的屏幕，只需要按照視覺稿的尺寸來就行。用在自己的項目里，效果還不錯。

 

其他問題

border 1px

除了淘寶的粗暴的縮放，其余的方式都是合適的時候用合適的方法。

我比較喜歡scale的方式，最好使用預處理器，要不費勁。。。（參考）

.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

需要判斷是不是高清屏,要不縮放了就不顯示了。

if(window.devicePixelRatio >= 2){
    document.querySelector('xxxx').classList.add('scale');
}

也可以使用media query。

 

@media (-webkit-min-device-pixel-ratio : 2){
  // blalala
}

高清圖片

我覺得，這個最好有專門的工具做，比如網易的NOS，可以對圖片做不同的處理，根據參數返回不同質量的圖片。

 

總結

剛剛接觸，查詢了一些資料，鏈接基本都在文章里了。一定還有需要完善的地方或者更好的方式，求討論求指教。。。