移动端屏幕适配解决方案
Posted worldly1013
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端屏幕适配解决方案相关的知识，希望对你有一定的参考价值。
因原在做移动端适配过程中，一直都是应用淘宝的flexible高清方案解决，也没有认真的去研究过源码。这几天又看到一些普通的适配方案，于是把两者源码放在一起比较，发现高清方案是通过动态的获取了当前设备的dpr值，然后根据dpr值的大小来设定手机的视口的缩放比例，从而实现高清。比如：dpr=2时，设定initial-scale = 0.5 ; dpr=3时 ，设定initial-scale = 0.333 ；
一、手机端viewport详解
<meta name="viewport" content="width=device-width,initial-scale=1.0，minimum-scale=1,maximum-scale=1">
1.因原手机端厂商为了使电脑端页面更好的迁移到手机端上来，因此大部分手机默认将viewport设为980px ，因此我们在写手机端页面时，上来通常会加上这样一句<meta>声明，这句话究竟有什么用了，又是什么意思了？
width：控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale:初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。
maximum-scale:最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。
minimum-scale:最小缩放，即允许的最小缩放程度。
二、普通方案
代码如下：
1 var docEl=document.documentElement; 2 var win=window; 3 function refreshRem(){ 4 //获取元素宽度 5 var width=docEl.getBoundingClientRect().width; 6 console.log(width); 7 //以640的设计稿为基准， 8 //直接用设计稿尺寸除以100即得到相对单位rem的值. 9 var rem=width/640*100; 10 docEl.style.fontSize=rem+\'px\'; 11 } 12 var temp; 13 //监听浏览器窗口改变大小事件 14 win.addEventListener(\'resize\',function(){ 15 clearTimeout(temp); 16 temp=setTimeout(refreshRem,300); 17 },false); 18 //监听浏览网页事件 19 win.addEventListener(\'pageshow\',function(e){ 20 if(e.persisted){ 21 clearTimeout(temp); 22 temp=setTimeout(refreshRem,300); 23 } 24 },false); 25 //初始化 26 refreshRem();
该JS文件通过获取设备当前宽度，然后通过设定 rem = width / 640 * 100 ; 从而动态的设定rem值的大小，然后把html根节点的font-size大小设为1rem值所代表的字体大小，然后我们就可以愉快
的使用rem来进行移动端的布局了。当然这是针对640px基本设计稿的（iphone5）, 如果你使用的是750px的设计稿（iphone6），改为 rem = width/750 * 100 就好了，即本文代码中蓝色标记部分
注意：html文件开头时需要加上此句meta声明
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,minimum-scale=1,maximum-scale=1" />
三、高清方案
代码如下：
1 (function(win, lib) { 2 var doc = win.document; 3 var docEl = doc.documentElement; 4 var metaEl = doc.querySelector(\'meta[name="viewport"]\'); 5 var flexibleEl = doc.querySelector(\'meta[name="flexible"]\'); 6 var dpr = 0; 7 var scale = 0; 8 var tid; 9 var flexible = lib.flexible || (lib.flexible = {}); 10 11 if (metaEl) { 12 console.warn(\'将根据已有的meta标签来设置缩放比例\'); 13 var match = metaEl.getAttribute(\'content\').match(/initial\\-scale=([\\d\\.]+)/); 14 if (match) { 15 scale = parseFloat(match[1]); 16 dpr = parseInt(1 / scale); 17 } 18 } else if (flexibleEl) { 19 var content = flexibleEl.getAttribute(\'content\'); 20 if (content) { 21 var initialDpr = content.match(/initial\\-dpr=([\\d\\.]+)/); 22 var maximumDpr = content.match(/maximum\\-dpr=([\\d\\.]+)/); 23 if (initialDpr) { 24 dpr = parseFloat(initialDpr[1]); 25 scale = parseFloat((1 / dpr).toFixed(2)); 26 } 27 if (maximumDpr) { 28 dpr = parseFloat(maximumDpr[1]); 29 scale = parseFloat((1 / dpr).toFixed(2)); 30 } 31 } 32 } 33 34 if (!dpr && !scale) { 35 var isandroid = win.navigator.appVersion.match(/android/gi); 36 var isIPhone = win.navigator.appVersion.match(/iphone/gi); 37 var devicePixelRatio = win.devicePixelRatio; 38 if (isIPhone) { 39 // ios下，对于2和3的屏，用2倍的方案，其余的用1倍方案 40 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { 41 dpr = 3; 42 } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ 43 dpr = 2; 44 } else { 45 dpr = 1; 46 } 47 } else { 48 // 其他设备下，仍旧使用1倍的方案 49 dpr = 1; 50 } 51 scale = 1 / dpr; 52 } 53 54 docEl.setAttribute(\'data-dpr\', dpr); 55 if (!metaEl) { 56 metaEl = doc.createElement(\'meta\'); 57 metaEl.setAttribute(\'name\', \'viewport\'); 58 metaEl.setAttribute(\'content\', \'initial-scale=\' + scale + \', maximum-scale=\' + scale + \', minimum-scale=\' + scale + \', user-scalable=no\'); 59 if (docEl.firstElementChild) { 60 docEl.firstElementChild.appendChild(metaEl); 61 } else { 62 var wrap = doc.createElement(\'div\'); 63 wrap.appendChild(metaEl); 64 doc.write(wrap.innerHTML); 65 } 66 } 67 68 function refreshRem(){ 69 var width = docEl.getBoundingClientRect().width; 70 if (width / dpr > 540) { 71 width = 540 * dpr; 72 } 73 var rem = width / 640 * 100; 74 docEl.style.fontSize = rem + \'px\'; 75 flexible.rem = win.rem = rem; 76 } 77 78 win.addEventListener(\'resize\', function() { 79 clearTimeout(tid); 80 tid = setTimeout(refreshRem, 300); 81 }, false); 82 win.addEventListener(\'pageshow\', function(e) { 83 if (e.persisted) { 84 clearTimeout(tid); 85 tid = setTimeout(refreshRem, 300); 86 } 87 }, false); 88 89 if (doc.readyState === \'complete\') { 90 doc.body.style.fontSize = 12 * dpr + \'px\'; 91 } else { 92 doc.addEventListener(\'DOMContentLoaded\', function(e) { 93 doc.body.style.fontSize = 12 * dpr + \'px\'; 94 }, false); 95 } 96 97 98 refreshRem(); 99 100 flexible.dpr = win.dpr = dpr; 101 flexible.refreshRem = refreshRem; 102 flexible.rem2px = function(d) { 103 var val = parseFloat(d) * this.rem; 104 if (typeof d === \'string\' && d.match(/rem$/)) { 105 val += \'px\'; 106 } 107 return val; 108 } 109 flexible.px2rem = function(d) { 110 var val = parseFloat(d) / this.rem; 111 if (typeof d === \'string\' && d.match(/px$/)) { 112 val += \'rem\'; 113 } 114 return val; 115 } 116 117 })(window, window[\'lib\'] || (window[\'lib\'] = {}));
该JS文件做了上述文件的工作并根据设备当前的dpr值动态的缩放了手机的视口，即dpr=2时，设定initial-scale = 0.5 ; dpr=3时 ，设定initial-scale = 0.333 ；从而有效的实现了高清方案。其适配
方法与上述一样，你也可以根据你设计师妹妹给你的设计稿情况动态的设定rem的大小，怎么方便怎么来，权利完全在你手上，你可是能够改变世界的人哦！！！
注意：此法不需要在html文件开头在写 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1,minimum-scale=1,maximum-scale=1" /> 这个声明，不然它
会按照你写的meta声明来对视口进行管理，从而不会再自动对视口进行缩放（代码请看源码蓝色标记）。
此法优点：
1.能够有效解决边框1px问题
2.能够很好的使图片达到适配
四、rem单位转换工具
1、使用sass预处理器
@function px2em($px, $base-font-size: 16px) { @if (unitless($px)) { @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you"; @return px2em($px + 0px); // That may fail. } @else if (unit($px) == em) { @return $px; } @return ($px / $base-font-size) * 1em; }
2、使用CSSREM插件
一个CSS的px值转rem值的Sublime Text 3自动完成插件
效果如下：
下载地址：CSSREM插件下载地址
使用方法详见MD文件，默认设置为1rem = 40px ;
以上是关于移动端屏幕适配解决方案的主要内容，如果未能解决你的问题，请参考以下文章