移动端开发多设备适配

时间 2021-08-14

标签 html ios 浏览器 app ide 字体 scala 设计 htm rem 栏目无线繁體版

原文原文链接

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">