移動端開發多設備適配

1、移動端多設備適配html

  參考了手機淘寶:ios

  針對安卓全部設備,devicePixelRatio(簡稱dpr),統一看成「1」處理,即一倍屏;而後viewport的寬度就等於device-width,可是淘寶的作法是沒有對viewport的width作明確指定,僅指定了scale值;由於瀏覽器實際上會根據scale來設置viewport的寬度;瀏覽器

  針對ios,則存在2倍,3倍屏;app


 最終就是根據dpr來肯定html根元素的字體大小,全部元素的寬高以rem單位來展現;ide

 

  這裏有一個基準值,就是設計稿的尺寸,好比設計稿是640*960,則這個基準值是64;具體可參考這篇文章:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041 字體

;(function(){
            var win = window, doc = document, docEl = doc.documentElement;
            var ios = win.navigator.appVersion.match(/iPhone/i), dpr = win.devicePixelRatio || 1, finalDpr = dpr;

            //僅針對iPhone作倍屏處理,即其它平臺dpr=1;
            if(!ios){
                finalDpr = 1;
            }

            var scale = 1 / finalDpr;

            var metaEl = doc.querySelector('meta[name="viewport"]');
            metaEl.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=0');

            docEl.setAttribute('data-dpr', finalDpr);

            var width = docEl.getBoundingClientRect().width;

            //針對安卓屏幕寬度超過設計稿尺寸時,限制最寬爲640,也就是說rem最大爲64px;
            if(width / finalDpr > 640){
                width = 640 * finalDpr;
            }
            docEl.style.fontSize = width  / 10 + 'px';

        })()


另一個注意事項是,頁面初始化是須要指定一個viewport(淘寶是能夠動態建立)scala

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
相關文章
相關標籤/搜索