移動屏幕適配

dreamGong 發(fā)布于2019-08-21 10:35 / 3462人閱讀

摘要：簡介移動屏幕適配是一個比較令人頭疼的問題，這是我寫的一個通過動態(tài)設(shè)置的移動屏幕適配的工具函數(shù)，包括定寬和兩種適配方法，目前在我自己的項目中用起來還不錯，后續(xù)也會優(yōu)化調(diào)整，地址這里。

2015-10-16更新。

簡介

移動屏幕適配是一個比較令人頭疼的問題，這是我寫的一個通過動態(tài)設(shè)置viewport的移動屏幕適配的工具函數(shù)，包括定寬和rem兩種適配方法，目前在我自己的項目中用起來還不錯，后續(xù)也會優(yōu)化調(diào)整，github地址這里。

說明

頁面事先添加meta標(biāo)簽，然后調(diào)用方法如fixViewport("fixed", 640)即可。

參數(shù)

type
適配類型(可選值為"fixed"或"rem")

width
設(shè)計稿寬度(整數(shù))

適配方法

可以選擇以下兩種方式進(jìn)行屏幕適配：

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

rem:
原理：根據(jù)設(shè)備dpr和屏幕寬度來計算viewport寬度，并根據(jù)設(shè)備dpr計算viewport縮放比例，然后在html標(biāo)簽中設(shè)置font-size的屬性值。
實際開發(fā)在css中任何長度尺寸均使用rem單位，大小設(shè)置為設(shè)計稿中尺寸值 / 100;
字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計稿中尺寸值 / 100；
非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計算其相對值。
若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設(shè)定為1px即可。

代碼

/**
 * Created by GG on 15/7/29.
 *
 *  頁面事先添加meta標(biāo)簽 
 *  參數(shù)：type(適配類型, 可選值為"fixed"或"rem")；width(設(shè)計稿寬度，整數(shù))
 *  可以選擇以下兩種情況適配：
 *  1. 定寬：原理是設(shè)定viewport的寬度為固定值(即傳遞的width值)，并根據(jù)屏幕寬度和width值計算viewport縮放比例。
 *     實際開發(fā)在css中任何長度尺寸均使用px單位，大小設(shè)置為設(shè)計稿中原始尺寸值；
 *     字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計算其相對值。
 *  2. REM：原理是根據(jù)設(shè)備dpr和屏幕寬度來計算viewport寬度，并根據(jù)設(shè)備dpr計算viewport縮放比例，然后在html標(biāo)簽中設(shè)置font-size的屬性值。
 *     實際開發(fā)在css中任何長度尺寸均使用rem單位，大小設(shè)置為設(shè)計稿中尺寸值 / 100;
 *     字體單位使用em, body下直接子元素字體大小設(shè)置為設(shè)計稿中尺寸值 / 100；
 *     非直接子元素若其父元素未設(shè)置字體大小則與直接子元素相同，否則根據(jù)父元素字體大小計算其相對值。
 *     若需要1px物理像素的邊框效果，則border的寬度不需要使用rem，設(shè)定為1px即可。
 */

(function () {
    function fixViewport(type, designWidth) {
        var metaEl = document.querySelector("meta[name="viewport"]");
        //由于初始設(shè)置了viewport的width=device-width,所以此處docEl.clientWidth即是屏幕的設(shè)備寬度
        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);

        //設(shè)置body的基準(zhǔn)字體大小
        document.body.style.fontSize = 50 / scale + "px";
    }

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