國內外移動端web適配屏幕方案

時間  2019-11-11
標籤 國內外 移動 web 適配 屏幕 方案 欄目 無線 简体版
原文   原文鏈接

基礎知識點css

設備像素：設備像素又稱物理像素（physical pixel），設備能控制顯示的最小單位，咱們能夠把這些像素看做成顯示器上一個個的點。 iPhone5的物理像素是640X1136。html

PS：在普通屏幕下，1個css像素對應1個物理像素(1:1)。前端

       在超高像素密度屏幕（Retina顯示屏）下，1個css像素對應4個物理像素(1:4)。（這裏指專指蘋果超高清屏幕）android

       所以，在移動端方面就須要設置dpr來保證超高清屏顯示圖片不會失真。git

 

邏輯像素（ logical pixel）獨立於設備的用於邏輯上衡量像素的單位。css像素就是邏輯像素，CSS像素是Web編程的概念。iPhone5的邏輯像素是320X568。github

 

設備獨立像素 （density-independent pixel） 簡稱 dip，單位dp，獨立於設備的用於邏輯上衡量像素的單位 。編程

PS：邏輯像素 ≈ 設備獨立像素。（設備獨立像素是android提出的）瀏覽器

 

設備像素比 (device pixel ratio)服務器

設備像素比 = 設備像素 / 設備獨立像素              // 在某一方向上，x方向或者y方向前端工程師

iphone5 爲例： 640X1136 / 320X568 = 2

 

屏幕像素密度（Pibel Per Inch）簡稱 ppi ，單位是 dpi，通常用來計量電腦顯示器，電視機和手持電子設備屏幕的精細程度。一般狀況下，每英寸像素值越高，屏幕能顯示的圖像也越精細。

屏幕像素密度=屏幕寬度（或高）像素 / 英寸寬屏幕（或高）英寸

 

關於設計與開發之間關係

網頁設計師按照設備像素爲單位制做設計稿。

前端工程師按照設備像素比進行換算後的邏輯像素爲單位制做網頁。

 

如：設計圖裏有元素寬度是100px，那麼獲得寬度會是 100px/2 = 50px。（僅供參考，以iphone6設計稿的尺寸爲例）

 

適配方案總結

1.固定viewport的寬度等於設備寬度，寬度自適應。

<meta name="viewport" content="width=device-width,initial-scale=1">  (適合響應式網站)

PS： 我見不少人都直接固定寬度。如：<meta name="viewport" content="width=640,user-scalable=no">

 

2.動態生成target-densitydpi值，固定viewport寬度值。

複製代碼 
function adaptVP(a) {
    function c() {
        if(b.uWidth = a.uWidth ? a.uWidth : 640, b.dWidth = a.dWidth ? a.dWidth : window.screen.width || window.screen.availWidth, b.ratio = window.devicePixelRatio ? window.devicePixelRatio : 1, b.userAgent = navigator.userAgent, b.bConsole = a.bConsole ? a.bConsole : !1, a.mode) return b.mode = a.mode, void 0;
        var c = b.userAgent.match(/Android/i);
        if(c) {
            b.mode = "android-2.2";
            var d = b.userAgent.match(/Android\s(\d+.\d+)/i);
            d && (d = parseFloat(d[1])), 2.2 == d || 2.3 == d ? b.mode = "android-2.2" : 4.4 > d ? b.mode = "android-dpi" : d >= 4.4 && (b.mode = b.dWidth > b.uWidth ? "android-dpi" : "android-scale")
        }
    }

    function d() {
        var c = "",
            d = !1;
        switch(b.mode) {
            case "apple":
                c = "width=" + b.uWidth + ", user-scalable=no";
                break;
            case "android-2.2":
                a.dWidth || (b.dWidth = 2 == b.ratio ? 720 : 1.5 == b.ratio ? 480 : 1 == b.ratio ? 320 : .75 == b.ratio ? 240 : 480);
                var e = window.screen.width || window.screen.availWidth;
                320 == e ? b.dWidth = b.ratio * e : 640 > e && (b.dWidth = e), b.mode = "android-dpi", d = !0;
            case "android-dpi":
                var f = 160 * b.uWidth / b.dWidth * b.ratio;
                c = "target-densitydpi=" + f + ", width=" + b.uWidth + ", user-scalable=no", d && (b.mode = "android-2.2");
                break;
            case "android-scale":
                c = "width=" + b.uWidth + ", user-scalable=no"
        }
        var g = document.querySelector("meta[name='viewport']") || document.createElement("meta");
        g.name = "viewport", g.content = c;
        var h = document.getElementsByTagName("head");
        h.length > 0 && h[0].appendChild(g)
    }

    function e() {
        var a = "";
        for(key in b) a += key + ": " + b[key] + "; ";
        alert(a)
    }
    if(a) {
        var b = {
            uWidth: 0,
            dWidth: 0,
            ratio: 1,
            mode: "apple",
            userAgent: null,
            bConsole: !1
        };
        c(), d(), b.bConsole && e()
    }
}
複製代碼

PS：實在不知道是源代碼是怎麼來的，是從項目中抽取出來的。這種方案已經不推薦使用。

      

3.動態initial-scale,maximum-scale,minimum-scale值，固定viewport寬度值。

複製代碼 
/**
 * MobileWeb 通用功能助手，包含經常使用的 UA 判斷、頁面適配、search 參數轉 鍵值對。
 * 該 JS 應在 head 中儘量早的引入，減小重繪。
 *
 * fixScreen 方法根據兩種狀況適配，該方法自動執行。
 *      1. 定寬： 對應 meta 標籤寫法 -- <meta name="viewport" content="width=750">
 *          該方法會提取 width 值，主動添加 scale 相關屬性值。
 *          注意： 若是 meta 標籤中指定了 initial-scale， 該方法將不作處理（即不執行）。
 *      2. REM: 不用寫 meta 標籤，該方法根據 dpr 自動生成，並在 html 標籤中加上 data-dpr 和 font-size 兩個屬性值。
 *          該方法約束：IOS 系統最大 dpr = 3，其它系統 dpr = 1，頁面每 dpr 最大寬度（即頁面寬度/dpr） = 750，REM 換算比值爲 16。
 *          對應 css 開發，任何彈性尺寸均使用 rem 單位，rem 默認寬度爲 視覺稿寬度 / 16;
 *              scss 中 $ppr(pixel per rem) 變量寫法 -- $ppr: 750px/16/1rem;
 *                      元素尺寸寫法 -- html { font-size: $ppr*1rem; } body { width: 750px/$ppr; }。

 */
window.mobileUtil = (function(win, doc) {
    var UA = navigator.userAgent,
        isAndroid = /android|adr/gi.test(UA),
        isIos = /iphone|ipod|ipad/gi.test(UA) && !isAndroid, // 聽說某些國產機的UA會同時包含 android iphone 字符
        isMobile = isAndroid || isIos;  // 粗略的判斷

    return {
        isAndroid: isAndroid,
        isIos: isIos,
        isMobile: isMobile,

        isNewsApp: /NewsApp\/[\d\.]+/gi.test(UA),
        isWeixin: /MicroMessenger/gi.test(UA),
        isQQ: /QQ\/\d/gi.test(UA),
        isYixin: /YiXin/gi.test(UA),
        isWeibo: /Weibo/gi.test(UA),
        isTXWeibo: /T(?:X|encent)MicroBlog/gi.test(UA),

        tapEvent: isMobile ? 'tap' : 'click',

        /**
         * 縮放頁面
         */
        fixScreen: function() {
            var metaEl = doc.querySelector('meta[name="viewport"]'),
                metaCtt = metaEl ? metaEl.content : '',
                matchScale = metaCtt.match(/initial\-scale=([\d\.]+)/),
                matchWidth = metaCtt.match(/width=([^,\s]+)/);

            if ( !metaEl ) { // REM
                var docEl = doc.documentElement,
                    maxwidth = docEl.dataset.mw || 750, // 每 dpr 最大頁面寬度
                    dpr = isIos ? Math.min(win.devicePixelRatio, 3) : 1,
                    scale = 1 / dpr,
                    tid;

                docEl.removeAttribute('data-mw');
                docEl.dataset.dpr = dpr;
                metaEl = doc.createElement('meta');
                metaEl.name = 'viewport';
                metaEl.content = fillScale(scale);
                docEl.firstElementChild.appendChild(metaEl);

                var refreshRem = function() {
                    var width = docEl.getBoundingClientRect().width;
                    if (width / dpr > maxwidth) {
                        width = maxwidth * dpr;
                    }
                    var rem = width / 16;
                    docEl.style.fontSize = rem + 'px';
                };

                win.addEventListener('resize', function() {
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }, false);
                win.addEventListener('pageshow', function(e) {
                    if (e.persisted) {
                        clearTimeout(tid);
                        tid = setTimeout(refreshRem, 300);
                    }
                }, false);

                refreshRem();
            } else if ( isMobile && !matchScale && ( matchWidth && matchWidth[1] != 'device-width' ) ) { // 定寬
                var    width = parseInt(matchWidth[1]),
                    iw = win.innerWidth || width,
                    ow = win.outerWidth || iw,
                    sw = win.screen.width || iw,
                    saw = win.screen.availWidth || iw,
                    ih = win.innerHeight || width,
                    oh = win.outerHeight || ih,
                    ish = win.screen.height || ih,
                    sah = win.screen.availHeight || ih,
                    w = Math.min(iw,ow,sw,saw,ih,oh,ish,sah),
                    scale = w / width;

                if ( scale < 1 ) {
                    metaEl.content = metaCtt + ',' + fillScale(scale);
                }
            }

            function fillScale(scale) {
                return 'initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';
            }
        },

        /**
         * 轉href參數成鍵值對
         * @param href {string} 指定的href，默認爲當前頁href
         * @returns {object} 鍵值對
         */
        getSearch: function(href) {
            href = href || win.location.search;
            var data = {},reg = new RegExp( "([^?=&]+)(=([^&]*))?", "g" );
            href && href.replace(reg,function( $0, $1, $2, $3 ){
                data[ $1 ] = $3;
            });
            return data;
        }
    };
})(window, document);

// 默認直接適配頁面
mobileUtil.fixScreen();
複製代碼

PS：這方案與方案2雷同（不是完美的解決方案）

 

4.動態生成initial-scale,maximum-scale,minimum值，佈局寬高使用rem，而後html標籤設置font-size，利用fone-size來控制rem寬高，而且還設備像素比來設置dpr來適配不一樣移動設備的屏幕密度顯示。

手淘方案 ：lib-flexible 

PS：相對複雜的完美解決方案。

 

===========================================================黃金分割線======================================================

 

Google（Facebook，亞馬遜，YouTube，eBay和雅虎）適配方案作法

 

原理： google PC端 與 google 移動端是分開的，PC端與移動端內容是動態的。（是響應式移動網站與響應式PC網站）

          依賴用戶代理字符串，經過同一網址向特定用戶代理下查看時展現不一樣內容的技術。（服務端進行適配處理）      

 

        

 

             

google移動端（android）

查看User-Agent標識符

 

google移動端（iphone）

查看User-Agent標識符

 

google PC端（mac平臺就不演示了）

 

 

比較：手淘方案優勢：精準，經過js計算，再配合css進行適配屏幕。

                      缺點：須要依賴，客戶端壓力大。

          google方案優勢：簡單，經過服務器端去判斷，配合css媒體查詢進行適配屏幕，效率高，無依賴。

                            缺點：不精準。服務端壓力大。

總結：獲取UA並不能獲取用戶的瀏覽器信息，由於不少移動瀏覽器能夠設置自定義UA（好比手機板QQ瀏覽器）

          具體問題具體分析。（優先考慮性能）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程