移動屏幕適配

2015-10-16更新。

簡介

移動屏幕適配是一個比較使人頭疼的問題，這是我寫的一個經過動態設置viewport的移動屏幕適配的工具函數，包括定寬和rem兩種適配方法，目前在我本身的項目中用起來還不錯，後續也會優化調整，github地址這裏。

說明

頁面事先添加meta標籤 <meta name="viewport" content="width=device-width, initial-scale=1" />，而後調用方法如fixViewport('fixed', 640)便可。

參數

• type
  適配類型(可選值爲'fixed'或'rem')

• width
  設計稿寬度(整數)

適配方法

能夠選擇如下兩種方式進行屏幕適配：

• 定寬：
  原理：設定viewport的寬度爲固定值(即傳遞的width值)，並根據屏幕寬度和width值計算viewport縮放比例。
  實際開發在css中任何長度尺寸均使用px單位，大小設置爲設計稿中原始尺寸值；
  字體單位使用em, body下直接子元素字體大小設置爲設計稿中尺寸值 / 100；
  非直接子元素若其父元素未設置字體大小則與直接子元素相同，不然根據父元素字體大小計算其相對值。

• rem:
  原理：根據設備dpr和屏幕寬度來計算viewport寬度，並根據設備dpr計算viewport縮放比例，而後在html標籤中設置font-size的屬性值。
  實際開發在css中任何長度尺寸均使用rem單位，大小設置爲設計稿中尺寸值 / 100;
  字體單位使用em, body下直接子元素字體大小設置爲設計稿中尺寸值 / 100；
  非直接子元素若其父元素未設置字體大小則與直接子元素相同，不然根據父元素字體大小計算其相對值。
  若須要1px物理像素的邊框效果，則border的寬度不須要使用rem，設定爲1px便可。

代碼

/**
 * Created by GG on 15/7/29.
 *
 *  頁面事先添加meta標籤 <meta name="viewport" content="width=device-width, initial-scale=1" />
 *  參數：type(適配類型, 可選值爲'fixed'或'rem')；width(設計稿寬度，整數)
 *  能夠選擇如下兩種狀況適配：
 *  1. 定寬：原理是設定viewport的寬度爲固定值(即傳遞的width值)，並根據屏幕寬度和width值計算viewport縮放比例。
 *     實際開發在css中任何長度尺寸均使用px單位，大小設置爲設計稿中原始尺寸值；
 *     字體單位使用em, body下直接子元素字體大小設置爲設計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設置字體大小則與直接子元素相同，不然根據父元素字體大小計算其相對值。
 *  2. REM：原理是根據設備dpr和屏幕寬度來計算viewport寬度，並根據設備dpr計算viewport縮放比例，而後在html標籤中設置font-size的屬性值。
 *     實際開發在css中任何長度尺寸均使用rem單位，大小設置爲設計稿中尺寸值 / 100;
 *     字體單位使用em, body下直接子元素字體大小設置爲設計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設置字體大小則與直接子元素相同，不然根據父元素字體大小計算其相對值。
 *     若須要1px物理像素的邊框效果，則border的寬度不須要使用rem，設定爲1px便可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector('meta[name="viewport"]');
        //因爲初始設置了viewport的width=device-width,因此此處docEl.clientWidth便是屏幕的設備寬度
        var clientWidth = document.documentElement.clientWidth;
        var width, scale;

        switch (type) {
            case 'fixed':
                width = designWidth;
                scale = clientWidth / designWidth;
                break;
            case 'rem':
                var dpr = window.devicePixelRatio || 1;
                width = clientWidth * dpr;
                scale = 1 / dpr;
                document.documentElement.style.fontSize = 100 * (clientWidth * dpr / designWidth) + "px";
                break;
        }
        metaEl.setAttribute('content', 'width=' + width + ',initial-scale=' + scale + ',maximum-scale=' + scale +
            ',minimum-scale=' + scale);

        //設置body的基準字體大小
        document.body.style.fontSize = 50 / scale + 'px';
    }

    fixViewport('rem', 640);
}());